项目中webpack配置文件详解(一)
最近在用react+webpack做项目,因为自己对这两个都不是很了解,感觉react+redux+react-router还好上手一点,但是webpack更吃力一点,现在经常用到的配置都有了,谈谈自己的理解,希望对大家有一点点帮助 \(^o^)/~
webpack配置文件是webpack.config.js,整个文件遵循commonJS规范,所以可以使用,require、module.exports等语法。
完整文件放到最后,下面逐行解释。
module.exports = {
entry: {
index: "./src/index.js"
}
首先是entry,这个是配置webpack入口,结合webpack插件htmlWebpackPlugin使用,将入口文件渲染到htmlWebpackPlugin中,下面解释一下htmlWebpackPlugin。
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template',
// Load a custom template (lodash by default see the FAQ for details)
template: 'index.html'
})
]
其中,template是指定模板文件位置,title是定义一个标题。在html中可以这样取到title属性。
<title><%= htmlWebpackPlugin.options.title%></title>
接下来是output
const path = require("path");
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js"
}
path是node自带的库,所以不需要额外安装,可以直接使用。path.resolve()方法会拼接参数,然后返回一个路径,像我们的例子中,会返回配置文件所在文件夹下的dist目录这个路径。
output这个配置项是打包项目用的,filename参数,顾名思义就是打包后生成的文件名,[name]就是当前打包的文件名,这样配置就相当于现在文件叫什么,打包后还是什么。下面放一下package.json里面的build指令。
"scripts": {
"build": "rd /s/q dist && webpack --config webpack.config.prod.js"
},
下一项是mode
mode: 'development'
mode的作用是配合definePlugin生成一个可以全局访问的变量,通过这个变量我们知道我们当前设置的模式是什么,然后做一些判断,比如开发模式,我就输出一些东西方便调试,然后运行模式,就不输出。我没有用这个definePlugin,所以不多解释,以免误导大家。
接下来是module
module: {
rules: [
{
test: /\.(js|jsx|mjs)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env", "@babel/preset-react"
],
plugins: [
"@babel/plugin-proposal-class-properties", // es6 class定义转换
"@babel/plugin-transform-runtime", //处理async awaiit支持
[ //装饰器
"@babel/plugin-proposal-decorators", {
"legacy": true
}
]
]
}
}
}, {
test: /\.(css|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'sass-loader']
})
}, {
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}, {
test: /\.(ttf|eot|svg)$/,
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
outputPath: 'images/'
}
}
]
}
这个就是比较重要的部分了,定义一些规则来解析我们的jsx,js,sass,图片,字体等。
test表示匹配项,loader表示我们使用的loader,这些loader都需要用node安装。然后在解释一下处理css和scss文件时用到的一个插件。
然后介绍一下extract-text-webpack-plugin
const ExtractTextPlugin = require("extract-text-webpack-plugin");
plugins: [
new ExtractTextPlugin('style.css')
]
这个插件是用来拆分样式文件,把所有的样式文件都抽离出来放到style.css中,防止跟js混在一起。
还有注意的是loader的加载顺序,postcss-loader要放在css-loader跟sass-loader中间。
下一篇继续介绍postcss-loader以及配置文件剩余的内容。