webpack

1:webpack安装和命令行

npm initnpm install webpack --save-devwebpack hello.js hello.bundle.js //hello.js 需要打包的文件名称 hello.bundle.js 打包完成之后的名称//模块化引入js文件require('./world.js');//引入css-loader style-loadernpm 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'        }),    ]}