Webpack配置文件一览
Webpack中配置文件是它的关键,绝大多数配置都在 webpack.config.js
中,主要结构如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| const path = require('path');
module.exports = { entry: './app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader'} ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html'}) ], mode: 'development' };
|
顾名思义webpack是一个打包工具,webpack提供了一个思路,将依赖作为图来遍历。
- 首先就需要一个入口,也就是
entry
这个属性(可以有多个入口entry),
output
表示打包好的文件输出到哪。
- 在打包的过程中会遇到很多问题,首先就是如果这个依赖webpack不认识怎么办,这时就需要
loader
将符合rule的require()/import
依赖通过指定loader打包到包里, test用于测试是否符合,use设置对应的loader。
- 尽管loader能够解决不认识的文件打包,但是还是需要一些
plugins
来做其他的任务,比如HtmlWebpackPlugin
用于将打包好的bundle注入到html中。
mode
用于触发webpack不同级别的优化,可选development, production or none
webpack安装配置
1 2
| npm install --save-dev webpack npm install --save-dev webpack-cli // webpack4需要安装这个
|
然后在package.json
里添加运行命令
1 2 3
| "scripts": { "start": "webpack --config webpack.config.js" }
|
react相关配置
因为react的语法是ES6,所以需要babel来转译为ES5,所以需要安装下面的包
1 2
| npm install --save react react-dom npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
|
babel-loader
:用于使用babel来转译,后面的preset是语言相关
@babel/preset-env
:用于将ES6转译为ES6
@babel/preset-react
:将react语法的JSX转译为JS
因为需要babel转译,所以在目录下创建babel配置文件.babelrc
,主要是使用下面的预设(preset),预设不对会报错,比如新版本的babel系列变成@开头、babel-preset-es2015
废止
1 2 3 4 5 6
| { "presets": [ "@babel/preset-env", "@babel/preset-react" ] }
|
这是就要修改webpack.conf.js
中加载器配置,需要排除node_modules
文件夹, 修改resolve,这样不用在import的时候还要添加文件类型尾缀
1 2 3 4 5 6 7 8
| module: { rules: [ { test:/\.js/, use: 'babel-loader', exclude: /node_modules/} ] }, resolve: { extensions: ['', '.js', 'jsx'] }
|
参考链接
安装react
1
| npm i react react-dom --save-dev
|
使用Prop Types声明compoent的props类型
1
| npm i prop-types --save-dev
|
此时webpack.config.js
如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { entry: './index.js', output: { filename: 'shaoshuai.js', }, module: { rules: [ { test:/\.(js|jsx)/, use: 'babel-loader', exclude: /node_modules/, } ] }, devServer: { contentBase: './dist', hot: true, }, plugins: [ new HtmlWebpackPlugin({ title: 'shaoshuai', template: "./index.html", filename: 'index.html' }) ], mode: 'development', }
|
html-webpack-plugin 自动注入
这个webpack插件创建HTML文件,并且把包路径名称写入到HTML中。安装方式如下:
1 2
| npm i --save-dev html-webpack-plugin yarn add --dev html-webpack-plugin
|
webpack dev server自动刷新页面
不需要每次都npm build来编译好,而是使用webpack-dev-server
1
| npm i webpack-dev-server --save-dev
|
然后在package.json里面添加
1
| "start": "webpack-dev-server --open --mode development"
|
支持scss
需要安装sass-loader
1
| npm install sass-loader node-sass --save-dev
|
需要css-loader(用于解析@import和url())、style-loader(超多功能,我看都是和把css当成js加载有关)
1
| npm install style-loader css-loader --save-dev
|
最后在webpack config里增加loader配置
1 2 3 4 5 6 7 8 9 10 11 12 13
| module.exports = { ... module: { rules: [{ test: /\.scss$/, use: [ "style-loader", "css-loader", "sass-loader" ] }] } };
|