webpack的坑

一、我遇到的坑

1.安装完webpwebpack4安装详细教程(包括css独立文件)写的非常详细,建议去看!!我这边就是总结了一下,自己补充了点东西

二、Webpack项目建立:

1.创建如下项目结构:

src:源代码,存放js、css、图片等静态资源
dist文件夹:存放webpack打包后,发布的代码
webpack.config.js文件:重要!配置webpack的
index.html:首页,必须单拿出来,与src、dist同级

2.以上创建好以后,进入安装webpack的步骤

补充:不用自己创建的:

node_modules文件夹:在安装解析CSS和图片的插件后,会自动生成
package.json文件:在初始化项目后,会自动生成,但是是空的,需要自己填内容
package-lock.json文件:在完成webpack打包后自动生成

最后生成的项目目录:
webpack的坑

三、安装webpack步骤 【在项目目录下打开cmd,输入以下命令]

1.初始化项目

npm init -y

补充:经过此步骤,会生成package.json文件

2.安装webpack

npm install --save-dev webpack

3.安装Webpack手脚架

npm install --save-dev webpack-cli

4.安装webpack-dev-server,当修改代码时webpack会进行自动编译,更新网页内容

npm install --save-dev webpack-dev-server

5.安装用于解析css的插件

npm install --save-dev style-loader css-loader

6.安装用于解析图片的插件

npm install --save-dev file-loader
npm install --save-dev jquery -s

7.安装分离css的插件[如果没有它,js和css都会被打包到main.js中,有它,那么css会被打包到main.css中,js会被打包到main.js中]

npm install --save-dev mini-css-extract-plugin

补充:经过此步骤,会生成node_modules文件夹

8.进入代码编写过程
编写index.html index.js index.css,其中 index.js index.css放入src中
可用以下代码来测试[参考链接]

  • index.html
<!DOCTYPE html> <html lang="en"> <head> 	<meta charset="UTF-8"> 	<title> 	</title> </head> <body>  </body> </html> 
  • index.js
import './index.css'   console.log('我显示了') 
  • index.css
html,body{ 	background: url('1.jpg'); } 

补充:记得在src中放入1.jpg

四、使用webpack打包

1.在index.html中引入

<link rel="stylesheet" href="dist/main.css"> <script src="dist/main.js"></script> 

补充:webpack4约定js打包的入口文件为src/index.js,输出文件为main.js
css打包同理。

<script src="dist/main.js"></script>表明首页文件的JS是从Webpack打包后的输出文件中获取。
虽然此时main.css和main.js还不存在,但是完成打包后便会生成。

2.配置webpack.config.js文件[参考链接]

const path = require('path'); const MiniCssExtractPlugin  = require('mini-css-extract-plugin')  module.exports={ 	entry:'./src/index.js',                    //配置输入文件 	output:{ 		filename:'main.js',                    //配置输出文件名 		path:path.resolve(__dirname,'dist'),   //输出文件路径 		publicPath:'dist/'                     // 用来指定静态资源发布地,不然后面图片会找不到的 	}, 	module:{ 		rules:[ 		   { 		   	 test:/.css$/, 		   	 use:[ 		   	   {              //拆分css文件 		  	   	loader:MiniCssExtractPlugin.loader, 		  	   	options:{ 		  	   		publicPath:'' 		  	   	} 		  	   },              		   	   'css-loader'           //解析css的插件 		   	 ] 		   }, 		   { 		   	test:/.(png|svg|jpg|gif)$/,   //解析图片的插件 		   	use:[ 		   	   'file-loader' 		   	] 		   } 		] 	}, 	plugins:[ 	   new MiniCssExtractPlugin({ 	   	 filename:"[name].css", 	   	 chunkFilename:"[id].css" 	   }) 	] } 

3.填写项目初始化后生成的package.json文件[参考链接]

{   "name": "webpack-demo1",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "test": "echo "Error: no test specified" && exit 1",     "dev": "webpack-dev-server --open chrome --port 3000 --hot --host 127.0.0.1"   },   "author": "",   "license": "ISC",   "devDependencies": {     "file-loader": "^3.0.1",     "webpack": "^4.28.1",     "webpack-cli": "^3.1.2"   },   "dependencies": {     "css-loader": "^2.0.1",     "style-loader": "^0.23.1"   } } 

补充:script这里添加 “dev”:"webpack-dev-server --mode development"后,只需在cmd输入npm run dev 便会完成打包
4.确保该安装的都安装了

npm install 

5.在项目根目录下打开cmd,输入

npm run dev 

6.打包成功,打开index.html便会看到1.jpg

补充:
VSCode 清除终端

版权声明:玥玥 发表于 2021-03-27 3:27:05。
转载请注明:webpack的坑 | 女黑客导航