webpack自动化构建工具

webpack官网
电脑已经安装了git和node
主要四大部分是：
入口（entry）
输出（output）
解析器（loader）
插件（plugins）

1/ npm（包管理工具）全局（-g）安装webpack和webpack-cli（命令行接口）
npm install webpack webpack-cli -g
2/ 初始化当前项目
npm init
在项目文件夹中生成 package.json
3/ 局部安装
npm install webpack webpack-cli -D 或者npm install webpack webpack-cli --save-dev （开发环境）
在项目文件夹中生成 node_modules 和 package-lock.json
(如果把项目发给别人，可以把node_modules删掉发，对方执行“npm install”命令就可以重新下载)
4/ 执行 webpack 命令，打包处理
默认入口路径 src/index.js ， 打包输入默认路径 dist/main.js
5/ 配置文件
环境变量 生产环境 production 开发环境 development
（shell语句） 命令 webpack --mode=development (输出文件未压缩)--------可以写到配置文件中
可以根据shell语句和配置文件设置打包方式
在项目中建 webpack.config.js 配置文件（可以配置两套配置文件，执行命令 webpack -config=名字）
配置文件详情请见demo
6/ 监听依赖文件变化 自动打包不能自动刷新
webpack --watch
开启服务器（可以自动刷新）
webpack-dev-server （先下载 npm install webpack-dev-server -D）
操作步骤：配置文件

改成绝对路径

webpack-dev-server --hot 只更新变化的部分

同一入口的多个js文件会打包一起；多个css文件和less文件会打包一起（如果使用插件单独打包的话）

html文件如果用的插件’html-webpack-plugin’打包，而不是引入到入口文件中打包，那html文件中的image就不会打包，解决办法：首先下载html-withimg-loader，其次先引入模块var html = require(‘html-withimg-loader’); 然后在module中配置 {test: /.(htm|html)$/i, use: [‘html-withimg-loader’]}，注意，如果有注释掉的图片引入代码也会加载

webpack.config.js文件配置：

//引入nodejs的path模块
var path = require('path');

//分离html插件 需要先下载插件 命令 npm install html-webpack-plugin -D
var HtmlWebpackPlugin = require('html-webpack-plugin');
//压缩js插件 命令 npm install uglifyjs-webpack-plugin -D
var Uglify = require('uglifyjs-webpack-plugin');
//抽离css文件(单独打包) 命令 npm install mini-css-extract-plugin -D
var Minify = require('mini-css-extract-plugin');
//打包html文件中的图片
var html = require('html-withimg-loader');

module.exports = {
    //入口文件（可以字符串/数组/对象）
    // entry:'./src/main.js',
    //可以有多个入口文件，则输出文件也要对应有多个，写法见下面
    entry:{
        mainBund:'./src/main.js',
        // xiaoMainBund:'./src/xiaoMain.js'
    },
    //输出文件
    // output:{
    //     filename:'bundle.js',
    //     //根目录下的dist
    //     path:path.resolve(__dirname, 'dist')
    // },
    output:{
        filename:'[name].js', //这个name是mainBund
        //根目录下的dist
        path:path.resolve(__dirname, 'dist')
    },
    //生产环境
    mode:'development',
    //开启/设置服务器
    devServer:{
        contentBase:'dist',
        port:9999,
    },
    //loader解析器
    module:{
        rules:[
            // css  loader
            {
                test:/\.css$/,
                //需要先下载使用命令 npm install style-loader css-loader -D
                //以style的形式解析成行间样式了，解析的时候从后往前解析
                // use:['style-loader', 'css-loader']
                //单独打包css文件，要用到mini-css-extract-plugin插件
                use:[Minify.loader, 'css-loader']
            },
            //html loader
            {
                // test:/\.html$/,
                // //需要先下载使用命令 npm install file-loader html-loader extract-loader -D
                // use:[
                //     //单独抽离的html文件进行配置
                //     {
                //         loader:'file-loader',
                //         options:{
                //             name:'index.html'
                //         }
                //     },
                //     //单独抽离html
                //     {
                //         loader:'extract-loader'
                //     },
                //     //找到html文件
                //     {
                //         loader:'html-loader'
                //     }
                // ]
            },
            //js loader (es6)
            {
                // test:/\.js$/,
                // //需要先下载使用命令 npm install babel-loader -D
                // use:['babel-loader']
            },
            //图片img  loader
            {
                test:/\.(jpg|png)/,
                //命令  npm install url-loader -D (url-loader包括file-loader)
                use:[
                    {
                        loader:'url-loader',
                        //如果不做处理，会以base64展示图片，做一下规定：如果小于8192则以base64，否则将图片输出到dist文件夹下
                        options:{
                            limit:8192,
                            name:'image/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            //less文件  loader
            {
                test:/\.less$/,
                //需要先下载使用命令 npm install less less-loader css-loader -D
                use:[Minify.loader, 'css-loader', 'less-loader']
            },
            //打包html文件中的图片
            {
                test: /\.(htm|html)$/i, 
                use: ['html-withimg-loader']
            }
        ]
    },
    //plugins插件
    plugins:[
        new HtmlWebpackPlugin({
            //只有在没有引用模板时title才起作用
            title:'title',
            template:'./src/index.html',
            chunks: ['mainBund'],  //如果有多个入口文件，用这个属性可以指定入口文件
            // inject:false, //不引入js文件
            //将生成的html文件压缩
            // minify:{
            //     collapseWhitespace:true
            // }
        }),
        // new Uglify(), // 压缩js插件
        new Minify({
            filename:'[name]_[contenthash:8].css'
        })
    ]
}

欢迎交流指正！