webpack

1:webpack安装和命令行

npm init
npm install webpack --save-dev
webpack hello.js hello.bundle.js //hello.js 需要打包的文件名称 hello.bundle.js 打包完成之后的名称
//模块化引入js文件
require('./world.js');
//引入css-loader style-loader
npm install --save css-loader style-loader
//js文件中引入css文件需要这样引入css才能生效
require('style-loader!css-loader!./style.css');
webpack hello.js hello.bundle.js //自动监听文件改变

2: webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // entry: ['./src/script/main.js', './src/script/a.js'], //入口文件
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js',
        b: './src/script/b.js',
        c: './src/script/c.js'
    },
    devServer: {
        contentBase: './dist'
    },
    output: {
        path: path.resolve(__dirname, 'dist'), //打包以后的文件路径
        filename: 'js/[name].js', //打包以后的文件名称
        publicPath: '/' //项目上线时添加的域名路径

    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Output management',
            template: 'index.html',
            filename:'a.html', // 设置生成文件的名称
            inject: 'head', //指定生成的脚本 放置在head区域
            chunks:['main','a'], // 生成的html文件只引入main  a 文件
            minify: {
                removeComments: true, // 去除注释
                collapseWhitespace: true //去除空格 更多参数看官方配置 
            }
        }),
        new HtmlWebpackPlugin({
            title: 'Output management',
            template: 'index.html',
            filename:'b.html', // 设置生成文件的名称
            inject: 'head', //指定生成的脚本 放置在head区域
            excludeChunks:['a','c'], //除了这里的文件其他的都引入
            minify: {
                removeComments: true, // 去除注释
                collapseWhitespace: true //去除空格 更多参数看官方配置 
            }
        }),
        new HtmlWebpackPlugin({
            title: 'Output management',
            template: 'index.html',
            filename:'c.html', // 设置生成文件的名称
            inject: 'head', //指定生成的脚本 放置在head区域
            chunks:['c'],
            minify: {
                removeComments: true, // 去除注释
                collapseWhitespace: true //去除空格 更多参数看官方配置 
            }
        }),
        new HtmlWebpackPlugin({
            template: 'about.html',
            filename: 'about.html'
        }),
    ]

}