在实际开发中，一般会有两套项目方案：

一套是开发期间的项目，包含了测试文件、测试数据、开发工具、测试工具等相关配置，有利于项目的开发和测试，但是这些文件仅用于开发，发布项目时候需要剔除；
另一套是部署期间的项目，剔除了那些客户用不到的测试数据测试工具和文件，比较纯净，减少了项目发布后的体积，有利于安装和部署！

一、开发环境配置

1.安装

npm init -y                                                       //项目初始化
npm install webpack@4.27.1 -d
npm install webpack-cli -d       提供一些基本命令(比如webpack命令)
npm install  webpack-dev-server -d
npm i html-webpack-plugin@3.2.0 --save-dev
npm install react react-dom -S
npm i babel-core@6.26.3 babel-loader@7.1.5 babel-plugin-transform-runtime --save-dev
npm i babel-preset-env babel-preset-stage-0 --save-dev
npm i babel-preset-react -D
npm install  style-loader  css-loader -D
npm i less-loader less                                             //less加载器
npm i sass-loader node-sass --save-dev               //sass加载器
npm i url-loader file-loader --save-dev

2.webpack.config.js

const path = require('path')
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    plugins: [
        // 添加plugins节点配置插件
        new htmlWebpackPlugin({
            template:path.resolve(__dirname, 'src/index.html'),//模板路径
            filename:'index.html'//自动生成的HTML文件的名称
        })
    ],
    module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
            { test: /\.less$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'sass-loader'] },
            { test: /\.(png|jpg|gif|bmp|jpeg)$/, use: 'url-loader?limit=1024&name=[hash:8]-[name].[ext]' },
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader
            //配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'], // 表示，这几个文件的后缀名，可以省略不写
        alias: {
            '@': path.join(__dirname, './src')
        }
    }
}

3.项目入口文件 main.js

// 1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'
import './css/index.css'
function Hello(props) {
    // props.name = 'zs'     不论是 Vue 还是 React，组件中的 props 永远都是只读的；不能被重新赋值;
    console.log(props)
    return <div><div className="box"></div>这是 Hello 组件 --- {props.name} --- {props.age} --- {props.gender}</div>
}
const dog = {
    name: '大黄',
    age: 3,
    gender: '雄'
}
ReactDOM.render(<div>
    {/* 使用{...obj}属性扩散传递数据 */}
    <Hello {...dog}></Hello>
</div>, document.getElementById('app'))

4.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

5.css/index.css

div{
    border: 1px solid red;
}
.box{
    width: 300px;
    height: 500px;
    background: url("../images/1.jpg");
}

6.package.json

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  }

7.项目根目录 .babelrc

{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime"]
}

二、生产环境配置文件

2-1 创建生产环境的配置文件

为了满足我们的发布策略，需要新建一个配置文件，命名为webpack.publish.config.js，将webpack.config.js的配置拷贝过去，剔除一些开发配置项即可：

将devServer节点和热更新插件删掉：

devServer: {
      hot: true,
      open: true,
      port: 4321
  }
 new webpack.HotModuleReplacementPlugin()

修改url-loader，将图片放入统一的images文件夹之下(图片路径写在css文件中才会被打包，如果直接写在行内样式里面，不会被打包)：
```
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=5000&name=images/[hash:8]-[name].[ext]' }
```
在package.json中的script节点下新增dev命令，通过--config指定webpack启动时要读取的配置文件：
```
"pub": "webpack --config webpack.publish.config.js"
```
2-2 每次重新构建时候删除dist目录
运行npm i clean-webpack-plugin --save-dev

在头部引入这个插件：

const {CleanWebpackPlugin } = require('clean-webpack-plugin');

在plugins节点下使用这个插件：
```
new CleanWebpackPlugin ()
```
2-3 分离第三方包

和plugins节点平级添加下面配置：

optimization: {
     splitChunks: {
         cacheGroups: {
             //自己写的代码打包 一个文件
             commons: {
                 name: "commons",
                 chunks: "initial",
                 //在分割之前，这个代码块最小应该被引用的次数
                 minChunks: 1,
                 //形成一个新代码块最小的体积
                 minSize: 0
             },
             //node_modules代码打包 一个文件
             vendor: {
                 chunks: "all",
                 test: /[\\/]node_modules[\\/]/,
                 name: "vendor",
                 minChunks: 1,
                 //入口最大的并行请求数
                 maxInitialRequests: 5,
                 // //形成一个新代码块最小的体积
                 minSize: 0,
                 //缓存组打包的先后优先级
                 priority: 100
             }
         }
     }
 },

html-webpack-plugin在生成index.html文件的时候，会自动将抽离的第三方包引入进去！

2-4 优化压缩HTML文件

在plugins节点下的htmlWebpackPlugin插件中，添加minify子节点：

new htmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html'),
    filename: 'index.html',
    //压缩合并html页面
    minify: {
        collapseWhitespace: true, // 合并多余的空格
        removeComments: true, // 移除注释
        removeAttributeQuotes: true // 移除 属性上的双引号
    }
}),

其他优化项请参考：html-minifier - github

2-5 抽取bundle.js中的CSS到指定文件

运行npm install extract-text-webpack-plugin@next安装抽取CSS文件的插件。

在配置文件中导入插件：

const ExtractTextPlugin = require("extract-text-webpack-plugin");

修改CSS和Sass的loader如下：

{
 test: /\.css$/, use: ExtractTextPlugin.extract({
     fallback: "style-loader",
     use: ["css-loader"],
     publicPath: '../'         // 设置css背景图片的路径
 })
},
{
 test: /\.scss$/, use: ExtractTextPlugin.extract({
     fallback: "style-loader",
     use: [
         {
             loader: 'css-loader',
             options: {
                 modules: {
                     localIdentName: '[path][name]__[local]--[hash:base64:5]'
                 }
             }
         },
         {
             loader: 'sass-loader',
         }
     ],
     publicPath: '../'         // 设置css背景图片的路径
 })
},
{
 test: /\.less$/, use: ExtractTextPlugin.extract({
     fallback: "style-loader",
     use: [
         {
             loader: 'css-loader',
             options: {
                 modules: {
                     localIdentName: '[path][name]__[local]--[hash:base64:5]'
                 }
             }
         },
         {
             loader: 'less-loader',
         }
     ],
     publicPath: '../'         // 设置css背景图片的路径
 })
},

在plugins节点下新增插件：
```
new ExtractTextPlugin("css/styles.css"), // 抽取CSS文件的插件
```
2-6 压缩抽取出来的CSS文件
参考文档
运行npm i optimize-css-assets-webpack-plugin --save-dev安装插件到开发依赖。

在配置文件头部导入插件：

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

在plugins节点下新增插件：
```
new OptimizeCssAssetsPlugin() // 压缩CSS文件的插件
```
2-7 生产环境配置文件总结
```javascript

新建webpack.pub.config.js

const path = require(“path”)

const htmlWebpackPlugin = require(‘html-webpack-plugin’); const {CleanWebpackPlugin } = require(‘clean-webpack-plugin’); const ExtractTextPlugin = require(“extract-text-webpack-plugin”); const OptimizeCssAssetsPlugin = require(‘optimize-css-assets-webpack-plugin’);

module.exports = { //生产环境 mode:”production”, entry: path.join(dirname, ‘./src/main.js’), output: { path: path.join(dirname, ‘./dist’), filename: ‘bundle.js’ }, plugins: [ // 添加plugins节点配置插件 new htmlWebpackPlugin({ template:path.resolve(dirname, ‘src/index.html’),//模板路径 filename:’index.html’,//自动生成的HTML文件的名称 //压缩合并html页面 minify: { collapseWhitespace: true, // 合并多余的空格 removeComments: true, // 移除注释 removeAttributeQuotes: true // 移除属性上的双引号 } }), //每次发布项目的时候自动清除之前的dist目录 new CleanWebpackPlugin (), new ExtractTextPlugin(“css/styles.css”), new OptimizeCssAssetsPlugin() // 压缩CSS文件的插件 ], module: { rules: [ { test: /.(ttf|eot|svg|woff|woff2)$/, use: ‘url-loader’ }, { test: /.js|jsx$/, use: ‘babel-loader’, exclude: /node_modules/ }, { test: /.css$/, use: ExtractTextPlugin.extract({ fallback: “style-loader”, use: [“css-loader”], publicPath: ‘../‘ // 设置css背景图片的路径 }) }, { test: /.scss$/, use: ExtractTextPlugin.extract({ fallback: “style-loader”, use: [ { loader: ‘css-loader’, options: { modules: { localIdentName: ‘[path][name][local]—[hash:base64:5]’ } } }, { loader: ‘sass-loader’, } ], publicPath: ‘../‘ // 设置css背景图片的路径 }) }, { test: /.less$/, use: ExtractTextPlugin.extract({ fallback: “style-loader”, use: [ { loader: ‘css-loader’, options: { modules: { localIdentName: ‘[path][name]__[local]—[hash:base64:5]’ } } }, { loader: ‘less-loader’, } ], publicPath: ‘../‘ // 设置css背景图片的路径 }) },

      //name=images/[hash:8]-[name].[ext]   发布项目的时候把图片都放到images文件夹下面去
      { test: /\.(png|jpg|gif|bmp|jpeg)$/, use: 'url-loader?limit=1024&name=images/[hash:8]-[name].[ext]' },
    ]
},
resolve: {
    extensions: ['.js', '.jsx', '.json'], // 表示这几个文件的后缀名，可以省略不写
    alias: {
        '@': path.join(__dirname, './src')
    }
},
optimization: {
    //分割代码块
    splitChunks: {
        cacheGroups: {
            //自己写的代码打包 一个文件
            commons: {
                name: "commons",
                chunks: "initial",
                //在分割之前，这个代码块最小应该被引用的次数
                minChunks: 1,
                //形成一个新代码块最小的体积
                minSize: 0
            },
            //node_modules代码打包 一个文件
            vendor: {
                chunks: "all",
                test: /[\\/]node_modules[\\/]/,
                name: "vendor",
                minChunks: 1,
                //入口最大的并行请求数
                maxInitialRequests: 5,
                // //形成一个新代码块最小的体积
                minSize: 0,
                //缓存组打包的先后优先级
                priority: 100
            }
        }
    }
},

}

package.json中新增

“scripts”: { “test”: “echo \”Error: no test specified\” && exit 1”, “dev”: “webpack-dev-server —open —port 3000 —contentBase src —hot”, “pub”: “webpack —config webpack.publish.config.js” } ```

三大框架

六、webpack配置详解