基本是学习的时候在网上整理的资料,并非自己原创,这篇文章的的主要目的是记录webpack.config.js的配置方式.可能也有不少错误,欢迎指正!!
一、应用场景
前端模块化开发、功能拓展、css预处理等需求导致项目中的文件数目变得更多,层级也更复杂.
二、主要职能
webpack的工作主要是打包,分为三个环节:匹配、处理、打包.
三、配置文件-webpack.config.js
在项目的根目录新建一个webpack.config.js文件告诉webpack该做的事.
module.exports={ //入口文件的配置项 entry:{}, //出口文件的配置项 output:{}, //解读CSS,图片如何转换,压缩等配置 module:{}, //项目依赖 plugins:[], //配置webpack开发服务功能 devServer:{} }
四、配置项分析
1.entry-入口项配置.
我们需要压缩的文件,比如js、css、less文件等
entry:{ //里面的entery是可以随便写的 entry:'./src/entry.js' },
2.output-出口项配置
压缩完成后文件名和地址
(1)._dirname:node中path对象的一个属性,获取当前文件的绝对路径.打包路径表示需要最终把打包好的文件生成在哪里,所以需要根据webpack.config.js的绝对位置来判断.为了不写死,我们需要动态获取绝对位置,就有用到这一属性
(2)path.resolve('a','b'):path对象的一个方法,将两个字符串拼接成一个新路径(自带一些优化功能,不仅仅是字符串拼接).
(3)path:以上两个都要依赖于path模块,所以要先通过require('path')导入path模块.
const path = require('path'); output:{ //打包的路径 path:path.resolve(__dirname,'dist'), //打包的文件名称 filename:'bundle.js' }
整个过程的意义就是,告诉webpack,我要你把入口配置好的所以文件给我压缩成名叫"bundle.js"的文件,放在路径"path"处
3.多入口、多出口文件打包
const path = require('path'); module.exports={ entry:{ //为了区别不同的入口,需要不同的属性名 entry:'./src/entry.js', //这里我们又引入了一个入口文件 entry2:'./src/entry2.js' }, output:{ path:path.resolve(__dirname,'dist'), //输出的文件名称,[name]会自动获取入口文件中的文件名,不同的文件就能拿到不同的文件名 filename:`[name].js` }, module:{}, plugins:[], devServer:{} }
4.同时压缩js文件和css文件
先下载处理器
npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader
const path = require('path'); module.exports={ entry:{ //入口文件并没有css文件?可以在entry.js中引入css文件,方便webpack进行同步压缩 entry:'./src/entry.js', entry2:'./src/entry2.js' }, output:{ path:path.resolve(__dirname,'dist'), filename:`[name].js` }, //webpack能识别css文件,但是你必须得告诉它我这里有css文件,所以在这里你要告诉它哪些文件是css文件 module:{ //它表示哪种类型的文件用哪种处理器(处理器?原来有吗?没有!所以需要下载,需要执行下载的语法) rules:[ //匹配到.css结尾的文件,就先调用对应的处理器 {test: /\.css$/, loader: "style!css?sourceMap!postcss"}, {test: /\.less$/, loader: "style!css!less|postcss"}, {test: /\.scss$/, loader: "style!css!sass|postcss"} ] ] }, plugins:[], devServer:{} }
还有其他的处理器,根据需求下载和匹配
- css-loader 处理css中路径引用等问题
- style-loader 动态把样式写入css
- sass-loader scss编译器
- less-loader less编译器
- postcss-loader scss再处理
- babel-loader js处理器这里需要配置(
exclude
) - jsx-loader
- url-loader
- file-loader
- json-loader
- raw-loader
4.plugins-插件依赖
想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。
多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 来创建它的一个实例。
先下载处理器
npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader
const path = require('path'); //导入需要的插件 const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports={
entry:{
entry:'./src/entry.js',
entry2:'./src/entry2.js'
},
output:{
path:path.resolve(__dirname,'dist'), filename:`[name].js`
},
module:{
rules:[
{test: /\.css$/, loader: "style!css?sourceMap!postcss"},
{test: /\.less$/, loader: "style!css!less|postcss"},
{test: /\.scss$/, loader: "style!css!sass|postcss"}
]
}, plugins:[ //打包js文件 new webpack.optimize.UglifyJsPlugin(), //entry.html未模板生成一个html5文件 new HtmlWebpackPlugin({template:'./src/entry.html'}) ], devServer:{} }
5.devServer-虚拟服务器
- 在开发模式下,DevServer 提供虚拟服务器,让我们进行开发和调试。
- 而且提供实时重新加载。简直美滋滋。大大减少开发时间。
- 它不是 webpack 内置插件哦,要安装!!!
先下载处理器
npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader
安装server插件
npm install webpack-dev-server --save-dev
const path = require('path'); //导入需要的插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); module.exports={ entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js' }, output:{ path:path.resolve(__dirname,'dist'), filename:`[name].js` }, module:{ rules:[ {test: /\.css$/, loader: "style!css?sourceMap!postcss"}, {test: /\.less$/, loader: "style!css!less|postcss"}, {test: /\.scss$/, loader: "style!css!sass|postcss"} ] }, plugins:[ //打包js文件 new webpack.optimize.UglifyJsPlugin(), //entry.html未模板生成一个html5文件 new HtmlWebpackPlugin({template:'./src/entry.html'}) ], //这里只列出部分参数,还有许多参数 devServer: { //如果为 true ,页面出错不会弹出 404 页面。如果为 {...} , 看看一般里面有什么。 historyApiFallback: true, //热模块更新作用。即修改或模块后,保存会自动更新,页面不用刷新呈现最新的效果(实际功能是自动添加HMR这个插件) hot: true, //如果为 true ,开启虚拟服务器时,为你的代码进行压缩。加快开发流程和优化的作用。 compress: true, //写主机名的。默认 localhost host: 'localhost', //端口号。默认 8080 port: 8080 }
五.本地服务器
在 package.json 配置下,方便使用
"scripts": { "dev": "webpack-dev-server" // 运行命令会自动在node_modules文件夹找 webapck-dev-server模块。"dev"就是你命令中run后面的词,你也可以换成"server"等词,不过对应的命令就得换成"npm run server"等 }
如果没在 package.json 配置且还是局部安装,你就要在命令行输入 node_modules/.bin/webpack-dev-server
。若你 package.json 配置好了,在命令行输入npm run dev