前言
这篇文章主要给大家介绍的是webpack从零开始搭建，简单介绍react单页多页配置。我的文章，欢迎点赞:
webpack核心模块：
- entry：入口文件（你要打包，就告诉我打包哪些）
- output：出口文件（我打包完了，给你放到哪里）
- module：模块（放lorder，编译浏览器不认识的东西）
- plugins：插件（辅助开发，提高开发效率）
- devServer：服务器（webpack提供的本地服务器）
- mode：模式，分为开发模式、生产模式。
webpack基本配置
一、创建文件/初始化/安装webpack
mkdir webpack4 && cd webpack4 // mkdir创建文件夹
npm init -y // npm init生成package.json
npm i webpack webpack-cli --save-dev
- 在这里用
npm init -y，加-y是之后所有选择都选yes，大家可以试下npm init，感受它们的区别。 - 大家可以看下
package.json的最基本的配置。
此时我们npm run build，会有两个错误：
1、error: 没有入口文件
2、warning: 建议设置 mode 选项（webpack4推荐使用的，development本地开发，production生产环境）。
二、entry & output
1、我们在根目录建一个src文件夹，src文件夹下建index.js。
2、然后npm run build打包成功。
因为webpack4默认自动配置了入口文件和出口文件。
三、production & development
webpack4 之前，我们需要写：
- 用于开发环境的webpack.dev.conf.js，定义 webpack 启动的服务器等
- 用于生产环境的webpack.prod.conf.js，定义UglifyJSPlugin或其他配置等
而 webpack4 的 mode 给出了两种配置：development(开发) 和 production(生产)。
生产模式下：启用了 代码压缩、作用域提升（scope hoisting）、 tree-shaking，使代码最精简
开发模式下：相较于更小体积的代码，提供的是打包速度上的优化
我们修改 package.json 中 scripts 部分：
"scripts": {
"start": "webpack --mode development",
"build": "webpack --mode production"
}
现在可以npm start运行项目了。
webpack的基本配置已经完成，搭建项目又是一项新工程。
1、js：转换ES6代码，解决浏览器兼容。
2、css：css单独打包并引入Less。
3、html，复制并压缩html文件。
4、dist，打包前清理源目录文件。
5、assets：静态资源处理。
6、devServer，热更新。
1、用 babel 转换 ES6 代码
用 babel 转换 ES6 代码
安装babel-loader：
npm i babel-core babel-loader babel-preset-env --save-dev
在根目录新建一个babel配置文件 .babelrc：
{
"presets": [
"env"
]
}
在根目录新建一个webpack配置文件 webpack.config.js：
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
}
使用 babel-polyfill 解决兼容性问题
babel-polyfill：全局变量更改，一次编译即可。（适合大型业务项目）
babel-plugin-transform-runtime：局部变量更改，会重复生成局部变量编译。（适合开源项目）
polyfill-io：会根据浏览器类型生成与其匹配的兼容编译，减少打包体积，推荐。
npm i babel-polyfill babel-plugin-transform-runtime --save-dev
.babelrc 添加配置：
{
"presets": [
"env"
],
"plugins": [
"transform-runtime"
]
}
webpack.config.js 添加配置:
const path = require('path');
module.exports = {
entry: [
"babel-polyfill",
path.join(__dirname, './src/index.js')
],
// ...
};
二、编译css
-
单独打包之前用
extract-text-webpack-plugin，现在用mini-css-extract-plugin -
浏览器前缀，比如
-webkit，我们每次写代码根本不想加，这时候就需要配置postcss-loader，打包后自动加。
如：-webkit-transform: all 1s;/这里bulid后自动添加了 -webkit-/
安装：
npm i mini-css-extract-plugin css-loader --save-dev
npm i style-loader postcss-loader --save-dev
webpack.config.js 添加配置:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = (env, argv) => {
const devMode = argv.mode !== 'production'
return {
module: {
rules: [
// ...,
{
test: /\.css$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "postcss-loader",
options: {
plugins: [
require("autoprefixer") /*在这里添加*/
]
}
}
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
}
三、生成html文件 html-webpack-plugin
作用1：如果我们本地需要html模板就需要这个插件，可配置单页、多页。
作用2：build后的js,css可添加Hash值。
npm i html-webpack-plugin html-loader --save-dev
webpack.config.js 添加配置:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
// ...,
{
test: /\.html$/,
use: [{
loader: "html-loader",
options: {
minimize: true
}
}]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
四、打包前清理源目录文件 clean-webpack-plugin
每次打包，都会生成项目的静态资源，随着某些文件的增删，我们的 dist 目录下可能产生一些不再使用的静态资源，webpack并不会自动判断哪些是需要的资源，为了不让这些旧文件也部署到生产环境上占用空间，所以在 webpack 打包前最好能清理 dist 目录。
npm install clean-webpack-plugin --save-dev
webpack.config.js 添加配置:
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin(['dist']),
]
};
五、静态资源处理 file-loader
assets文件下包含我们运用的静态资源，如图片，文本等
npm install file-loader --save-dev
webpack.config.js 添加配置:
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
}
}
六、热更新 webpack-dev-server
npm i webpack-dev-server --save-dev
package.json更改scripts配置:
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
webpack.config.js 添加配置:
module.exports = (env, argv) => {
const devMode = argv.mode !== 'production'
return {
devServer: {
port: 3000, //端口号
overlay: true, // 开启错误调试,
hot: true, //是否开启hot-module-replacement
https: false, // 如果需要用https请开启，如http2
compress:false, //是否启用 gzip 压缩。boolean 为类型，默认为 false
open: false, // 启动且第一次构建完时自动用你系统上默认的浏览器去打开要开发的网页。
stats: "errors-only" // 只展示错误信息，避免大量无用日志
}
}
};
更多的 webServer配置详情。
到这里webpack构建自动化项目的重要配置已经完成。接下来就是与各种框架的匹配配置。
webpack4 + react项目
目录如下：
├── src
│ ├── assets # 静态资源
│ ├── components # 组件
│ │ ├── Product.less # less文件
│ │ └── Product.js # jsx文件，vscode配置可以使用js
│ ├── index.js # 入口文件
│ ├── index.html # 模板文件
│ └──index.less
├── .babelrc
├── package-lock.json
├── package.json
└── webpack.config.js
安装react相关模块
npm i react react-dom --save
npm i babel-preset-react --save-dev
npm i less less-loader --save-dev
.babelrc 配置
{
"presets": [
"env",
"react"
],
"plugins": [
"transform-runtime"
]
}
webpack.config.js 最终配置：
const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = (env, argv) => {
const devMode = argv.mode !== 'production'
return {
entry: [ // 入口文件
"babel-polyfill",
path.join(__dirname, './src/index.js')
],
output:{ // 入口文件
filename:'main.js'
},
devServer: { // 热更新
port: 3000, //端口号
overlay: true, // 开启错误调试,
hot: true, //是否开启hot-module-replacement
https: false, // 如果需要用https请开启，如http2
compress:false, //是否启用 gzip 压缩。boolean 为类型，默认为 false
open: false, // 启动且第一次构建完时自动用你系统上默认的浏览器去打开要开发的网页。
stats: "errors-only" // 只展示错误信息，避免大量无用日志
},
module: { // loader配置
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [{
loader: "html-loader",
options: {
minimize: true
}
}]
},
{
test: /\.css$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "postcss-loader",
options: {
plugins: [
require("autoprefixer") /*在这里添加*/
]
}
}
]
},
{
test: /\.less$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
{
loader: "postcss-loader",
options: {
plugins: [
require("autoprefixer") /*在这里添加*/
]
}
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
},
plugins: [
new CleanWebpackPlugin(['dist']), // 清除上一次dist的源文件
new HtmlWebPackPlugin({ // 配置html模板
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({ // css单独打包
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
};
总结：至此我们学了如何从零搭建webpack+react项目，之后router，redux等全家桶系列，大家可以自行研究，其实熟悉以后完全可以自己写一套脚手架，比如写一套将redux与redux-saga合并的状态管理工具。
建议大家看我的原文地址：github单页应用
以下是比较成熟的脚手架推荐给大家：
下篇文章：webpack4+react多页应用
网友评论