webPack - webPack 起步 - 《Blog - 博客》

webPack 作为前端开发工具的用途
核心概念
webPack 及其插件安装
模块的规范
css 加载器
webpack.config.js 配置文件

webPack 作为前端开发工具的用途

代码转换
文件优化
代码分割
文件合并
自动刷新
代码校验
自动发布

核心概念

入口（entry）
出口（output）
loader loader 让 webpack 能够去处理那些非 JavaScript 文件
插件(plugins )

webPack 及其插件安装

新建一个文件夹
初始化 npm init -y
安装 webPack, npm install webpack webpack-li -D (不加 -D 默认安装在生产环境，-D 表示安装在开发环境下,)

[ 运行 ]

package.json 文件的 scripts 属性中配置执行命令

开发环境打包: “dev”: “webpack —mode development”
生产环境打包:”build”: “webpack —mode production”

运行 npm run 配置的命令

[ 插件安装 ]

html-webpack-plugin -D ( 把打包后的文件自动引入到 html 文件中)
clean-webpack-plugin -D (清空输出目录)
webpack-dev-server -D（创建本地服务器，自动重新构建，自动打开浏览器并刷新）
optimize-css-assets-webpack-plugin -D （压缩 css 代码）
terser-webpack-plugin -D (css 压缩以后默认的 js 压缩会失效故需要覆盖默认压缩工具)

模块的规范

esModule 规范 (es6 模块)

引入 import
导出 export

commonJS 规范（node 模块）

引入 require
导出 module.export

css 加载器

css 解析加载器： css-loader style-loader -D

如果 css 文件中引入 less 文件

use: ['style-loader', {
                    loader: 'css-loader',
                        options:{
                            importLoaders: 1 // 用后面('less-loader')的 1 个加载器来解析 ，如果是两个就是 2 
                        }
                    },'less-loader'
                ]

less 解析加载器： less less-loader -D
sass 解析加载器： node-sass sass-loader -D
stylus 解析加载器： stylus stylus-loader -D

[ 处理 css 私有前缀 ]

postcss-loader(样式处理工具，可以借助自定义插件重新定义 css) 如：autoprefixer(私有前缀的插件) -D

/***
 * 需要配置 postcss.config.js 文件
 * 
 * 
 * 
 */
// 设置处理样式的配置文件
module.exports = { 
    plugins: [
        // 引入插件
        require('autoprefixer')
    ]
}

[ 分离 css 插件 ] mini-css-extract-plugin -D

webpack.config.js 配置文件

// 配置文件
//  node commonJS 规范
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 分离 css 插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 压缩 css 代码
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 压缩 js 代码
const TerserJSPlugin = require('terser-webpack-plugin');
// console.log(__dirname); // 项目在本地存储中的绝对路径 E:\My Web\珠峰2019\FRAME\webPack\20191210
// console.log(path.resolve(__dirname,"dist")); // 项目在本地存储中的绝对路径 E:\My Web\珠峰2019\FRAME\webPack\20191210\dist  一般使用 path.resolve(__dirname,dist)
/**
 * path 中的其他方
 * 
 */
// 把打包后的文件自动引入到 html 文件中 如果文件过多优化
 let htmlPlugin = ['index','other'].map(chunckName=>{
    //  console.log(chunckName);
     return new HtmlWebpackPlugin({
        template:`./${chunckName}.html`, // 注意此处不是引号
        filename:`${chunckName}.html`, 
        chunks:[chunckName], 
    })
 })
module.exports = {
    /*  entry: "./src/index.js", // 单个入口文件 必须使用相对路径
        output: {
            // 文件指纹： hash chunkHash contentHash  防止有缓存
            // filename:'bundle.[contentHash:8].js',
            filename:'bundle.js', //输出文件名
            path: path.resolve(__dirname,"dist") // 把路径地址解析为绝对地址
        }, */
    // 压缩 css js 代码
    optimization: { 
        minimizer:[ // 压缩 css js 代码 
            new OptimizeCssAssetsPlugin(),
            new TerserJSPlugin(),
        ]
    },
    // 多入口文件 多出口文件
    entry: {
        index:"./src/index.js",
        other:"./src/other.js"
    },
    output: {
        filename:'[name].js', // name 指 index other
        path: path.resolve(__dirname,"dist") 
    },
    // 加载器
    module: {
        rules:[
            // 自下而上 解析 css 加载顺序 css-loader style-loader
         /*    {
                test: /\.css$/,  //匹配的文件
                use: 'css-loader'
            },
            {
                test: /\.css$/,  //匹配的文件
                use: 'style-loader',
                enforce:'post' // pre 优先加载  post 最后加载
            } */
            // 合并书写 css 加载
            {
                test: /\.css$/,  //匹配的文件
                // [] / {} / “”  水平方向解析 从右往左
                // use: ['style-loader', 'css-loader']
                // 如果 css 文件中引入 less 文件
                use: [
                    // 'style-loader',  使用分离插件后  style-loader 不需要
                {
                    loader: MiniCssExtractPlugin.loader,
                },
                {
                    loader: 'css-loader',
                        options:{
                            importLoaders: 2 // 用后面的 1 个加载器来解析 ，如果是两个就是 2 
                        }
                    },'postcss-loader','less-loader'
                ]
            },
            // less 加载 仅限于引入到 js 文件中的 less 文件
            {
                test: /\.less$/,
                use: ['style-loader','css-loader', 'less-loader' ]
            }
        ]
    },
    // 创建服务器
    devServer: { //在内存中打包，所有的内容在根目录下
        port: 8081,
        open: true, // 自动打开浏览器
        compress: true, //是否压缩代码，在内存中打包 
        contentBase: "static", //直接启动 static 文件夹下的静态资源文件
        hot:true,     //自动刷新
    },
    // 配置插件 自下而上执行
    plugins: [
        // 分离 css 插件
        new MiniCssExtractPlugin({
            filename: 'css/main.css', // 设置分离出的 css 的目录及文件名
        }),
        new CleanWebpackPlugin(), //清空输出目录
        // new CleanWebpackPlugin({
        //     // cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*'], 清空某一文件夹下的所有文件，但是不包含**
        //     cleanOnceBeforeBuildPatterns: ['cc/*','!cc/a.js']
        // }), 
        // 把打包后的文件自动引入到 html 文件中
      /*   new HtmlWebpackPlugin({
            template:'./index.html' , //依赖的模板文件 html 文件
            hash:true,
            minify:{
                removeAttributeQuotes: true, //删除引号
                collapseWhitespace: true, //删除空格
            },
            filename:'index.html', //打包后的 html 文件名
            chunks: ['index'], //指定引入的入口 html 文件
        }),
        new HtmlWebpackPlugin({
            template:'./other.html' , //依赖的模板文件 html 文件
            hash:true,
            filename:'other.html', //打包后的 html 文件名
            chunks: ['other'], //指定引入的入口 html 文件
        }), */
        // 把打包后的文件自动引入到 html 文件中 如果文件过多优化
        ...htmlPlugin  //把数组的每一项展开
    ]
}