1、安装webpakck
npm install --save-dev webpack webpack-cli
刚刚安装的版本是 5.73.0
2、新建config配置文件夹
在根目录下创建一个webpack.config文件夹，在此文件夹下创建三个配置文件
- webpack.common.config.js -- 公共配置文件
- webpack.prod.config.js -- 生产环境配置文件
- webapck.dev.config.js -- 开发环境配置文件
在根目录下再创建一个src文件夹，新建 app.js文件
3、在webpack.common.config.js文件中输入以下代码
const path = require('path');
module.exports = {
entry: {
app: './src/app.js',
},
output: {
filename: 'js/bundle.js',
path: path.resolve(__dirname, '../dist'),
},
};
4、安装webpack-merge
用于合并webpack配置
npm install --save-dev webpack-merge
5、配置开发环境，生产环境webpack
const path = require('path');
module.exports = {
entry: {
app: './src/app.js'
},
output: {
filename: 'js/bundle.js',
path: path.resolve(__dirname, '../dist')
}
}
6、安装React
npm install --save react react-dom
7、修改app.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>my-project!!!!!</div>
);
}
}
export default App;
8、在src下新增index.js，代码如下
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.jsx';
ReactDOM.render(<App />, document.getElementById('root'))
9、修改webpack.common.js配置文件入口为：index.js
10、安装bable
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime
各个bable的作用：
- babel-loader：使用 Babel 和 webpack 来转译 JavaScript 文件。
- @babel/core：babel 的核心模块
- @babel/preset-env：转译 ES2015+的语法
- @babel/preset-react：转译 react 的 JSX
- @babel/plugin-proposal-class-properties：用来编译类(class)
- @babel/plugin-transform-runtime：防止污染全局，代码复用和减少打包体积
11、在webpack.common.js加入bable配置
const path = require('path');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: 'js/bundle.js',
path: path.resolve(__dirname, '../dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
'@babel/plugin-transform-runtime',
'@babel/plugin-proposal-class-properties'
]
}
}
}
]
}
}
12、安装HtmlWebpackPlugin
npm install --save-dev html-webpack-plugin
13、配置webpack.config.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.config');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html',
inject: 'body',
minify: {
removeComments: true
}
})
]
})
- template：基于我们自己定义的 html 文件为模板生成 html 文件
- filename：打包之后的 html 文件名字
- inject：将 js 文件注入到 body 最底部
- minify：压缩 html 文件时的配置
- removeComments：去除注释
14、生成文件添加hash值
output: {
filename: 'js/[name]-bundle-[hash:8].js',
path: path.resolve(__dirname, '../dist')
}
- [name] 打包入口名称
- [hash] 哈希串默认长度为 20，:6 为取前六位
15、打包前清理dist目录（新版本可以不引入插件）
npm install --save-dev clean-webpack-plugin
代码如下：
const { merge } = require('webpack-merge');
const common = require('./webpack.common.config');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html',
inject: 'body',
minify: {
removeComments: true
}
}),
new CleanWebpackPlugin()
]
})
注意：新版可配置output对象属性clean为true，来清理
16、安装webpack-dev-server
npm install -D webpack-dev-server
修改webpack.dev.js
const { merge } = require('webpack-merge');
const path = require('path')
const common = require('./webpack.common.config');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(common, {
mode: 'development',
devServer: {
// 新版本不再支持contentBase，而是使用static，路径指定有问题
// contentBase: path.join(__dirname, 'dist'),
prot: 8888,
compress: true，
static: {
directory: path.join(__dirname, '/public')
}
},
plugins: [
new HtmlWebpackPlugin({
template: 'public/index.html',
inject: 'body',
hash: false
})
]
})
- contentBase: 启服务的文件
- port: 端口号
- compress: 为每个静态文件开启[gzip压缩]
17、样式配置
安装style-loader、css-loader
npm install --save-dev style-loader css-loader
新增配置
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
18、打包css
安装插件
npm i -D mini-css-extract-plugin
配置打包
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
在插件里面新增配置
new MiniCssExtractPlugin({
filename: 'style/[name].[hash].css'
})
19、压缩打包出来的css文件
安装依赖
npm i -D css-minimizer-webpack-plugin
配置压缩
optimization: {
minimize: true,
minimizer: [new CssMinizerPlugin()]
},
20、配置less、sass
安装依赖
npm i less less-loader -D
npm i -D sass sass-loader node-sass
配置less，sass
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
{
test: /\.s[ac]ss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
21、压缩js代码
下载插件
npm i -D terser-webpack-plugin
配置压缩文件
optimization: {
minimize: true,
minimizer: [
new CssMinizerPlugin(),
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true
}
}
})
]
},
22、配置css浏览器前缀
安装依赖
npm i -D postcss postcss-loader autoprefixer
在根目录，新增postcss.config.js文件，代码如下：
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8',
]
})
]
};
在css-loader后面新加postcss-loader
23、配置图片load，使用url-loader
安装url-loader，url-loader依赖于file-loader，所以需要安装两个loader
npm i -D file-loader url-loader
配置代码
{
test: /\.(png|jpe?g|gif)$/,
loader: 'url-loader',
options: {
name: '[name].[ext]',
outputPath: 'images',
limit: 8192
}
}
- 后缀为 jpg,png,gif 的文件，使用 url-loader 进行预处理；
- options 中的[name].[ext]表示，输出的文件名为 原来的文件名；
- outputPath 是输出到 dist 目录下的路径，即 dist/images；
- limit: 8192，指定文件的最大体积（以字节为单位）。 如果文件体积等于或大于限制，默认情况下将使用 file-loader 并将所有参数传递给它。若是小于了 8kb，将图片打包成 base64 的图片格式插入到 bundle.js 文件中，这样做的好处是，减少了 http 请求，但是如果文件过大，js 文件也会过大，得不偿失，这是为什么有 limit 的原因。
24、配置source-map
devtool: 'eval-cheap-module-source-map',
25、配置resolve.alias
resolve: {
extensions: ['.js', '.jsx', '.json', '.less', '.scss'],
modules: [ path.resolve(__dirname, '../src'), 'node_modules' ],
alias: {
'@': path.join(__dirname, '../src')
}
}
- extensions: 如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。使用此选项会 覆盖默认数组，这就意味着 webpack 将不再尝试使用默认扩展来解析模块。
- modules: 如果你想要添加一个目录到模块搜索目录，此目录优先于 node_modules/ 搜索。
- alias: 创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块
网友评论