打包神器webpack的一键式操作

创建基本的webpack4.x项目

1. 运行npm init -y 快速初始化项目
2. 在项目根目录创建src源代码目录和dist产品目录
3. 在 src 目录下创建 index.html
4. 使用 cnpm 安装 webpack ，运行cnpm i webpack webpack-cli -D
   • 如何安装 cnpm: 全局运行 npm i cnpm -g
5. 注意：webpack 4.x 提供了 约定大于配置的概念；目的是为了尽量减少 配置文件的体积；
   • 默认约定了：
   • 打包的入口是src -> index.js
   • 打包的输出文件是dist -> main.js
   • 4.x 中 新增了 mode 选项(为必选项)，可选的值为：development 和 production;

// 向外暴露一个打包的配置对象
module.exports = {
    mode: "development"
}
//同样也可以进行入口文件和出口文件的配置
module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        // path: path.resolve(process.cwd(), "dist"),
        filename: "static/js/[name].js", // string [name].[chunkhash:8].js
    }
}

6. 配置html-webpack-plugin 插件
   导入在内存中自动生成index页面，并引入相应的js文件。
   npm i --save-dev html-webpack-plugin
   创建一个插件的实例对象

// 导入在内存中自动生成index页面的插件
const HtmlWebPackPlugin = require('html-webpack-plugin');
// 创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    // 源文件  根路径
    template: path.join(__dirname, "./src/index.html"),
    // 生成的内存中首页的名字
    filename: "index.html"
});
//或者在plugins中进行相应的配置
plugins: [
        new HtmlWebpackPlugin({
            title: 'My App',
            template: 'public/index.html'
        })
]

7. 配置webpack-dev-server 插件
   实时打包编译，打包好的main.js放入了内存中，目录是不可见的。通过实时打包可以直接引入内存中的main.js文件，速度更快。
   npm install webpack-dev-server --save-dev
   在目录清单的scripts中进行配置

"dev": "webpack-dev-server --open Chrome --port 3000 --hot --host 127.0.0.1"

通过npm run dev进行启动

8. 安装css-loader style-loader对css进行打包管理
   npm install --save-dev style-loader css-loader

 module: {
        rules: [{
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            }
}

在这种情况下压缩出来的样式是内联样式，不方便进行阅读。可以使用 mini-css-extract-plugin把 css单独提取出来。
npm install --save-dev mini-css-extract-plugin
在rules中更改配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
        rules: [{
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
            }
            ]
},
plugins: [
        new MiniCssExtractPlugin({
            filename: 'static/css/[name].css'
        })
    ]
}

9. 配置css预处理语言
   $ npm install less-loader less--save-dev
   在rules中更改配置

module: {
        rules: [ {
                test: /\.less$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'],
            }
            ]
}

10. 安装autoprefixer postcss-loader 插件
    自动增加前缀，提高兼容性
    npm i -D postcss-loader
npm i -D autoprefixer
    在rules中的css配置最后增加postcss-loader

module: {
        rules: [{
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
            }
            ]
}

新建一个postcss.config.js文件

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

在package.json配置文件中增加一个字段

"browserslist": [
//兼容99.5%的浏览器
    "cover 99.5%",
    "last 8 version"
//最后8个版本
  ]

11. 安装 file-loader插件
    对图片资源进行处理
    $ npm install file-loader --save-dev
    在rules中更改配置

    module: {
        rules: [{
                test: /\.(png|jpe?g|gif)$/i,
                use: [{
                     loader: 'file-loader',
                     options: {
                         name: 'static/img/[name].[ext]',
                         publicPath: '/'
                     }
                }]
            }

在这种情况下，无论图片多大都会进行处理会影响浏览器的渲染速度。
通过安装url-loader插件实现对图片的选择性处理
$ npm install url-loader --save-dev
在rules中更改配置

    module: {
        rules: [{
                test: /\.(png|jpe?g|gif)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 10000, //小于8kb的转换为base64编码并载入浏览器能够减少http请求数
                        name: 'static/img/[name].[ext]',
                        publicPath: '/'
                    }
                }]
            }

12. 安装copy-webpack-plugin插件
    在有些时候我们会对一些静态资源进行原封不动的拷贝，手动的话太麻烦这时需要借助copy-webpack-plugin插件
    $ npm install copy-webpack-plugin --save-dev
    在plugins中进行配置

const CopyPlugin = require('copy-webpack-plugin');
plugins: [
        new CopyPlugin([{
            from: path.resolve(process.cwd(), 'src/images/'),
            to: path.resolve(process.cwd(), 'dist/images')
        }])
    ]

13. 安装babel插件

loader官方解释是文件预处理器，通俗点说就是webpack在处理静态文件的时候，需要使用 loader 来加载各种文件，比如： html文件需要使用html-loader ,css 需要使用css-loader 、 style-loader 等等。

npm install --save-dev babel-loader @babel/core @babel/preset-env

babel-loader，用来处理ES6语法，将其编译为浏览器可以执行的js语法。
在 rules中添加配置信息

 module: {
        rules: [
            {
                test: /\.js$/,
                // (不处理node_modules 和 bower_components下的js文件) 优化处理加快速度
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                    // presets设置的就是当前js的版本
                        presets: ['@babel/preset-env']
                        //plugins: [require('@babel/plugin-transform-object-rest-spread')] // plugin是需要的插件       
                    }
                }
            }
        ],
    }

可以使用 options 属性 来给loader传递选项：

• cacheDirectory ： 默认值是false. 当设置了这个值时，指定的目录将会用来缓冲loader的执行结果。之后的webpack 构建，将会尝试读取缓冲，来避免每次都执行时，产生高性能消耗的编译过程。如果提供的时空值或者传入true，那么loader使用默认的缓冲目录node_modules/.cache/babel-loader 。(如果没有找到node_modules将会往上一级查找)
  +babel-loader很慢！
• 解决办法：
• 要排除 node_modules，参考文档中的loaders 配置的exclude选项。
• 你也可以通过使用 cacheDirectory 选项，将 babel-loader 提速至少两倍。 这会将转译的结果缓存到文件系统中。