webpack4配置学习
上文学习了webpack基础安装及执行,接下来学习一下webpack的一些基础配置。 webpack一切皆模块,默认处理js,无论是js、sass、png、jpg都属于模块,所有模块默认有一个入口模块,从入口模块开始打包,入口文件中有依赖其他模块,再把其他模块打包。
命令行配置
洗衣机
- webpack是一个打包工具,为了更好的理解他的配置,我们来打个比方:
- 小女子比较懒,平时洗衣服几乎都是洗衣机,洗衣机就相当于webpack工具,洗衣服的时候,直接塞进去,按开始键,洗衣机就按照它默认的程序执行洗衣步骤。
- 如果哪天我要洗羊毛料的衣服,我需要按洗衣机的按钮,选择羊毛,这个过程就是配置过程,洗衣机就按照我配置的方法洗衣服。
- 接下来就看看洗衣机怎么配置吧,哦不。。。是webpack
入口文件
- 那么在我们没配置文件的时候,执行webpack默认的入口文件为:
当前执行命令的文件夹下-->src文件-->index.js
复制代码
默认的出口文件为:
当前执行命令的文件夹下-->dist文件-->main.js
复制代码
- 自行配制
当默认有多个入口/默认的入口不在当前的src下的index.js时,就需要我们‘按洗衣机键子’啦,不然工具不知道该从哪个文件开始,从哪个文件输出,强制执行估计它会崩溃吧,哈哈:
1、在命令行输入
webpack demo.js -o bundle.js
//demo.js为要打包的文件,-o为output,及输出,将打包文件输出为bundle.js文件,在html文件中script标签引入bundle.js即可
- 若要设置打包的模式
webpack demo.js -o bundle.js --mode development
//--mode development意为设置mode(模式)为开发模式
复制代码
2、在文件夹中创建配置文件webpack.config.js
//下方详解
复制代码
webpack核心概念及配置文件
配置文件
- 遵循common.js规范
- 在项目中,我们往往不会使用webpack的默认配置,在当前项目创建一个配置文件
webpack.config.js
-
当在命令行输入webpack执行打包,会发现,它变心了,它就不找src下的index.js了,而是找我们的配置文件了,当然,前提是你的配置文件名为webpack.config.js。
-
当一个项目不同环境使用不同打包配置文件时命令行输入
webpack --config 配置文件名
复制代码
下面在了解核心概念时,我会同步到配置文件中。。。
概念
- buddler
代表被打包过后的文件
入口(entry)
入口起点 --> 入口文件以来的模块和库 --> 处理依赖
单个/多个入口
- webpack.config.js
module.exports = {
entry:'./src/index.js' //字符串形式
entry: { //对象形式,支持多个入口文件
main: './path/to/my/entry/file.js',
app: './src/app.js'
}
}
复制代码
输出(output)
打包完毕 --> 输出bundles(打完包的部分) --> 输出文件命名(默认为./dist)
单个/多个输出
- webpack.config.js
const path = require('path')
module.exports = {
entry:'./src/index.js' //入口
output: { //出口
path: path.resolve(__dirname,'dist'), //第一个path为当前路径,第二个path是node里提供的变量,需提前引入,__dirname找到当前文件(webpack.config.js)所在目录,'dist'为打包后输出的文件
filename: 'my-first-webpack.bundle.js' //输出的单个文件名字
filename: '[name].bundle.js' //当有多个入口文件时,就会打包成多个出口文件,name为入口文件名
}
}
复制代码
- 执行webpack命令会发现dist文件中出现了my-first-webpack.bundle.js文件
加载器(loader)
用来将其他不同语言的文件(如:less、sass、typescript等)转为js文件
- webpack.config.js
const path = require('path')
module.exports = {
entry:'./src/index.js' //入口
output: { //出口
path: path.resolve(__dirname,'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: { //loader模块
rules: [
{ test: /\.css$/, use: 'css-loader' }, //use为使用什么类型的loader处理test匹配到的文件
{ test: /\.less$/, use: ['style-loader','css-loader','less-loader']} //匹配所有的less文件,先用less-loader解析,再用css-loader解析css,之后用style-loader使文件解析为行内样式表,前提是这三个模块和less都已下载安装
]
}
}
复制代码
了解插件(plugins)
下载 --> require进配置文件中 --> 应用到配置数组plugins中
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装,抽离出html文件,里面默认引入打包完的文件
const path = require('path')
module.exports = {
entry:'./src/index.js' //入口
output: { //出口
path: path.resolve(__dirname,'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: { //loader模块
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.less$/, use: ['style-loader','css-loader','less-loader']}
]
},
plugins: [
new HtmlWebpackPlugin()
]
}
复制代码
插件这里只做了解,之后会单独详解插件的配置~
模式
选择development 或 production 之中的一个,来设置 mode 参数
- webpack.config.js
const path = require('path')
module.exports = {
entry:'./src/index.js', //入口
output: { //出口
path: path.resolve(__dirname,'dist'),
filename: 'my-first-webpack.bundle.js'
},
mode: 'development'
}
复制代码
- development
开发模式,打包之后文件为未压缩版本的
- production
生产模式,打包之后文件为压缩版本的,缺点在开发中保存都会在第一行,对开发人员不友好