使用脚手架
git clone git@github.com:xiehaitao0229/react-wepack4-xht.gitcd react-webpack4-xht
`npm run dev` // 启动本地`npm run build` // 打包线上环境`npm run clean` // 清除线上环境打包出来的文件`npm run test` // 单元测试的工具库`npm run fix` // 修复eslint的写法`npm run format` // 格式化代码`npm run precommit` // commit 代码到git仓库的检查
webpack今年推出的4这个版本就一直关注很学习它，webpack4这个版本借鉴了parcel的零配置，打包速度变得更快，值得大家去跟进学习。
既然我们已经迎接了webpack4的到来了，那么就一起来使用一下，即使你没用过之前的版本，没关系，我们重新出发，将工作中常用到的配置写给大家来看
安装webpack
需要先在项目中npm init初始化一下，生成package.json
建议node版本安装到8.2以上
// webpack4中除了正常安装webpack之外，需要再单独安一个webpack-clinpm i webpack webpack-cli -D
webpack是基于Node的
在项目下创建一个webpack.config.js(默认，可修改)文件来配置webpack
module.exports = {
entry: '', // 入口文件
output: {}, // 出口文件
module: {}, // 处理对应模块
plugins: [], // 对应的插件
devServer: {}, // 开发服务器配置
mode: 'development' // 模式配置}以上就是webpack的正常配置模块
启动devServer需要安装一下webpack-dev-server
npm i webpack-dev-server -D
image.png
接下来我们按照项目的结构，我们就从0开始去写一下配置
// webpack.config.jsconst path = require('path');module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 打包后的文件名称
path: path.resolve('dist') // 打包后的目录，必须是绝对路径
}
}上面就可以说是实现了最简单的webpack配置了，那接下来就打包一下看看
image.png
配置执行文件
工作当中我们打包编译的时候一般都执行npm run dev这样的命令，既然是通过npm执行的命令，我们就应该找到package.json里的执行脚本去配置一下命令，这里如下图所示
image.png
npm run build就是我们打包后的文件，这是生产环境下，上线需要的文件
npm run dev是我们开发环境下打包的文件，当然由于devServer帮我们把文件放到内存中了，所以并不会输出打包后的dist文件夹
配置Html模板
文件都打包好了，但是我们在使用的时候不能在dist目录下去创建一个html文件，然后去引用打包后的js吧，这不合理，实际开发中也不会这样
我们需要实现html打包功能，可以通过一个模板实现打包出引用好路径的html来
这就需要用到一个常用的插件了，< html-webpack-plugin >，用之前我们来安一下它
npm i html-webpack-plugin -D
let path = require('path');// 插件都是一个类，所以我们命名的时候尽量用大写开头let HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/index.js', output: { // 添加hash可以防止文件缓存，每次都会生成4位的hash串
filename: 'bundle.js',
path: path.resolve('dist')
}, plugins: [ // 通过new一下这个类来使用插件
new HtmlWebpackPlugin({ // 用哪个html作为模板
// 在src目录下创建一个index.html页面当做模板来用
template: './src/index.html', hash: true, // 会在打包好的bundle.js后面加上hash串
})
]
}通过上面的配置后，我们再npm run build打包看一下现在是个什么样子了
image.png
多页面开发，怎么配置多页面
如果开发的时候不只一个页面，我们需要配置多页面，那么需要怎么来搞呢？不用担心，html-webpack-plugin插件自有办法，我们来观望一下
let path = require('path');let HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { // 多页面开发，怎么配置多页面
entry: { index: './src/index.js', login: './src/login.js'
}, // 出口文件
output: {
filename: '[name].js', path: path.resolve('dist')
}, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html',
filename: 'index.html', chunks: ['index'] // 对应关系,index.js对应的是index.html
}), new HtmlWebpackPlugin({ template: './src/index2.html', filename: 'login.html', chunks: ['login'] // 对应关系,login.js对应的是login.html
})
]
}
image.png
上面基本介绍完了html和js的打包配置了，webpack对css的解析需要用到loader，所以我们先提前安装好，待会好方便使用
引用CSS文件
需要下载一些解析css样式的loader
npm i style-loader css-loader -D// 引入less文件的话，也需要安装对应的loadernpm i less less-loader -D npm i node-sass sass-loader -D
下面我们来看一下如何配置css文件的解析
// index.jsimport './css/style.css'; // 引入cssimport './less/style.less'; // 引入lessconsole.log('这里是打包文件入口-index.js');// webpack.config.jsmodule.exports = {
entry: {
index: './src/index.js'
},
output: {
filename: 'bundle.js',
path: path.resolve('dist')
}, module: {
rules: [
{
test: /\.css$/, // 解析css
use: ['style-loader', 'css-loader'] // 从右向左解析
/*
也可以这样写，这种方式方便写一些配置参数
use: [
{loader: 'style-loader'},
{loader: 'css-loader'}
]
*/
}
]
}
}
此时打包后的css文件是以行内样式style的标签写进打包后的html页面中，如果样式很多的话，我们更希望直接用link的方式引入进去，这时候需要把css拆分出来
extract-text-webpack-plugin插件它的功效就在于会将打包到js里的css文件进行一个拆分,单独提取css
拆分CSS
// @next表示可以支持webpack4版本的插件npm i extract-text-webpack-plugin@next -D
let path = require('path');let HtmlWebpackPlugin = require('html-webpack-plugin');// 拆分css样式的插件let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');module: { rules: [
{ test: /\.less$/, // 解析less
use: ExtractTextWebpackPlugin.extract({ // 将css用link的方式引入就不再需要style-loader了
fallback: "style-loader", use: ['css-loader', 'less-loader'] // 从右向左解析
})
},
{ test: /\.scss$/, // 解析scss
use: ExtractTextWebpackPlugin.extract({ // 将css用link的方式引入就不再需要style-loader了
fallback: "style-loader", use: ['css-loader', 'sass-loader'] // 从右向左解析
})
},
{ test: /\.css$/, // 解析css
use: ExtractTextWebpackPlugin.extract({ // 将css用link的方式引入就不再需要style-loader了
fallback: "style-loader", use: ['css-loader']
})
}
]
}, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html',
}), // 拆分后会把css文件放到dist目录下的css/style.css
new ExtractTextWebpackPlugin('css/style.css')
]
image.png
另一个插件mini-css-extract-plugin也是可以办到的，它可以说是为webpack4而生的，
在这里就简单的提一下
npm i mini-css-extract-plugin -D
let MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { module: { rules: [
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
}, plugins: [ new MiniCssExtractPlugin({ filename: 'css/a.css' // 指定打包后的css
})
]
}拆分成多个css
这里要着重说一下上面两个插件的区别了，个人还是建议用extract-text-webpack-plugin的，毕竟从之前的版本承接下来的，虽然在安包的时候需要@next，但是还是值得信赖的
而且现在的extract-text-webpack-plugin也支持了拆分成多个css，而目前mini-css-extract-plugin还不支持此功能
// 正常写入的lesslet styleLess = new ExtractTextWebpackPlugin('css/style.css');// resetlet resetCss = new ExtractTextWebpackPlugin('css/reset.css');module.exports = { module: { rules: [
{ test: /\.css$/, use: resetCss.extract({ fallback: "style-loader",
use: 'css-loader'
})
},
{ test: /\.less$/, use: styleLess.extract({ fallback: "style-loader", use: ['css-loader', 'less-loader'] // 从右向左解析
})
}
]
}, plugins: [
styleLess,
resetCss
]
}通过这样操作后可以打包成两个不同的css文件，如下图
image.png
引用图片
npm i file-loader url-loader -D
如果是在css文件里引入的如背景图之类的图片，就需要指定一下相对路径
module.exports = { module: {
rules: [
{
test: /\.(jpe?g|png|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192, // 小于8k的图片自动转成base64格式，并且不会存在实体图片
outputPath: 'images/' // 图片打包后存放的目录
}
}
]
}
]
}
}
作者：神秘者007
链接：https://www.jianshu.com/p/91a4214b913b
随时随地看视频
