webpack基本配置--超详细版加问题解决
第一步：在安装webpack前，需要本地环境支持node.js
安装node.js (nodejs.org/en/ 8.11.1版本 )安装完成之后，就自动生成npm(包管理器)
node -v (测试node的版本号) ， npm -v(测试npm的版本号) -----这么做的目的是为了测试node环境有没有搭建完成
安装cnpm（类似于npm）
优势：它的服务器是在中国，运行速度会比较快
地址：npm.taobao.org/
在终端执行： sudo npm install -g cnpm–registry=registry.npm.taobao.org
第二步：安装webpack的两种方式
运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
在项目根目录中运行npm i webpack --save-dev安装到项目依赖中
在4.0+版本中，除了安装webpack，还需安装webpack-cli才能运npm i webpack-cli -g进行全局安装
第三步：创建文件项目
建文件目录：mywebpack
在mywebpack 里面创建两个子文件夹src dist
通过webpack工具，把main.js处理后生成的bundle.js文件放在这里
在src中同时创建一个index.html和main.js
main.js主要用于引入js文件，这样index.html中只需加载一个main.js就够了，不会造成Ajax请求
src文件夹中放自己的项目内容，分别创建css、js、images文件夹
dist文件夹存放打包好的要发布的文件（产品级内容）
开始项目
问题1：若main.js文件中引用了ES6的高级语法，会报错
原因： 因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；
解决：运行webpack 入口文件路径 -o 输出文件路径对main.js进行处理：
//注意，对于4.0+版本，语法已经改变，要记得加上-o webpack .\src\main.js -o .\dist\bundle.js 复制代码
问题2：每次编译完成都要重新输入上面语句，过于麻烦
解决：在项目根目录下，新建一个webpack.config.js文件进行相关配置 ，配置如下
const path = require('path'); module.exports = { //入口，表示要使用webpack打包哪个文件 entry:'./src/main.js', //出口，输出文件相关的配置 output:{ path:path.resolve(__dirname,'dist'),//指定 打包好的文件输出到哪个目录中 filename:'bundle.js'//指定 输出的文件名称 } }; 复制代码
配置好文件后，只需在终端输入webpack即可打包
webpack打包好的budle.js文件并没有存放到实际的物理磁盘上，而是直接托管到了 电脑的内存中， 所以，在项目根目录中根本找不到这个打包好的bundle.js
所以，在index.html中引入的bundle.js应该修改为如下
<script src="/bundle.js"></script> 复制代码
问题3：每次都要重新输入上面语句，虽然已简化但任然过于麻烦
想要每次保存即自动打包编译
解决：安装webpack-dev-server工具来实现
安装步骤：
运行npm i webpack-dev-server -D
用法和webpack的用法完全一样
问题4： 运行webpack-dev-server报错！！！
原因：webpack-dev-server是在项目中本地安装的，而不是全局的，不能在终端上直接执行
解决：配置package.json文件，配置如下（推荐）
{ "name": "mywebpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" //--open 是为了保存后直接打开浏览器 //--port 3000 修改浏览器的默认端口号，默认为localhost:8080 //--contentBase src 是浏览器默认打开文件为src文件，其实就是打开src文件下的index.html，而不是根目录 //--hot 热重载，不会每次都重新生成新的bundle.js文件，而是局部更新，减少不必要的更新，同时可以实现浏览器的无刷新重载 }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "jquery": "^3.4.1", "webpack-dev-server": "^3.8.0" }, "devDependencies": { "webpack": "^4.39.1", "webpack-cli": "^3.3.6" } } 复制代码第二种配置方式：
首先在package.json文件下进行如下配置
"dev": "webpack-dev-server" 复制代码
其次在webpack.config.js中在原来的基础上添加以下配置：
const webpack = require('webpack'); module.exports = { devServer:{//这是配置dev-server命令参数的第二种形式，相对第一种更复杂 open:true, port:3000, contentBase:'src', hot:true//启用热更新 第一步 }, plugins:[//配置插件的节点 new webpack.HotModuleReplacementPlugin()//new 一个热更新的对象 第三步 ] } 复制代码第四步：使用html-webpack-plugin插件配置启动页面
安装
在终端中安装npm i html-webpack-plugin -D
在webpack.config.js中导入在内存中生成HTML页面的插件，注意：只要是插件，一定要放到plugins节点中去
const htmlWebpackPlugin = require('html-webpack-plugin') plugins:[//配置插件的节点 new webpack.HotModuleReplacementPlugin(),//new 一个热更新的对象 第三步 new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件 template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面 filename:'index.html'//指定生成页面的名称 }) ] 复制代码此时，生成的页面源码如下，在最底下自动增加了一个内存中的bundle.js的引用，则不再需要手动添加bundle.js的引用路径了，可注释掉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="/bundle.js"></script> </head> <body> <ul> <li>这是第1个li标签</li> <li>这是第2个li标签</li> <li>这是第3个li标签</li> <li>这是第4个li标签</li> <li>这是第5个li标签</li> <li>这是第6个li标签</li> </ul> <script type="text/javascript" src="bundle.js"></script></body> </html> 复制代码
作用
自动在内存中根据指定页面生成一个内存页面
自动将打包好的bundle.js追加到页面中去
第五步：配置处理第三方loader
注意：
webpack默认只能打包处理 JS 类型的文件，无法处理 其他的非 JS 类型的文件
如果要处理 非JS类型的文件，需要手动安装一些 适合第三方loader加载器
打包处理css文件：
安装npm i style-loader css-loader -D
在webpack.config.js中新增一个配置节点module
module:{//这个节点，用于配置所有第三方模块加载器 rules:[//所有第三方模块的匹配规则 {test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则 ] } 复制代码同时在main.js中导入css文件
import './css/index.css' 复制代码
打包处理less文件
安装npm i less-loader -D
安装npm i less -D
在webpack.config.js中新增一个配置节点module
module:{//这个节点，用于配置所有第三方模块加载器 rules:[//所有第三方模块的匹配规则 {test:/\.less$/,use:['style-loader','css-loader','less-loader']}s//配置处理.less文件的第三方loader规则 ] } 复制代码打包处理scss文件
安装npm i sass-loader -D
安装cnpm i node-sass -D(用npm很大情况会装不下来，推荐cnpm)
在webpack.config.js中新增一个配置节点module
module:{//这个节点，用于配置所有第三方模块加载器 rules:[//所有第三方模块的匹配规则 {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}//配置处理.scss文件的第三方loader规则 ] } 复制代码总结
index.html如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 将所有js文件导入放到main.js中 --> <!-- <script src="main.js"></script> --> <!-- <script src="../dist/bundle.js"></script> --> <!-- <script src="/bundle.js"></script> --> </head> <body> <ul> <li>这是第1个li标签</li> <li>这是第2个li标签</li> <li>这是第3个li标签</li> <li>这是第4个li标签</li> <li>这是第5个li标签</li> <li>这是第6个li标签</li> </ul> </body> </html> 复制代码
main.js如下：
import $ from 'jquery' //使用import语法，导入css样式表 import './css/index.css' // 导入less样式 import './css/index.less' // 导入scss样式 import './css/index.scss' $(function(){ $('li:odd').css('backgroundColor','blue'); $('li:even').css('backgroundColor','pink'); }) 复制代码webpack.config.js如下
const path = require('path'); const webpack = require('webpack'); const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { //入口，表示要使用webpack打包哪个文件 entry:'./src/main.js', //出口，输出文件相关的配置 output:{ path:path.resolve(__dirname,'dist'),//指定 打包好的文件输出到哪个目录中 filename:'bundle.js'//指定 输出的文件名称 }, devServer:{//这是配置dev-server命令参数的第二种形式，相对第一种更复杂 open:true, port:3000, contentBase:'src', hot:true//启用热更新 第一步 }, plugins:[//配置插件的节点 new webpack.HotModuleReplacementPlugin(),//new 一个热更新的对象 第三步 new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件 template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面 filename:'index.html'//指定生成页面的名称 }) ], module:{//这个节点，用于配置所有第三方模块加载器 rules:[//所有第三方模块的匹配规则 {test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则 {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理.less文件的第三方loader规则 {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}//配置处理.scss文件的第三方loader规则 ] } }; 复制代码package.json如下
{ "name": "MyProgram_webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot", "dev": "webpack-dev-server" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "jquery": "^3.4.1", "webpack-dev-server": "^3.8.0" }, "devDependencies": { "css-loader": "^3.2.0", "html-webpack-plugin": "^3.2.0", "less": "^3.9.0", "less-loader": "^5.0.0", "sass-loader": "^7.2.0", "style-loader": "^1.0.0", "webpack": "^4.39.1", "webpack-cli": "^3.3.6" } } 复制代码每次开启用npm run dev
作者：草垛垛吖
链接：https://juejin.cn/post/7021437480301756430