webpack的使用

1、在安装webpack 之前，相信你应该已经对你的项目进行了初始化。如果么偶有请执行下面命令（在你项目文件夹下的cmd）

npm init

会自动生成package.json 文件 

2、接下来用npm 下载webpack，注意：webpack 版本不能太高（不能是最新版本，不然后期会报很多错）

全局的

npm install webpack@3.10.0 -g

局部的(-D等同于 --save-dev)

npm install webpack@3.10.0 -D

下载完成后package.json文件中会如图信息：

 3、手动在你的项目文件夹下（根文件夹）创建webpack.config.js文件或者webpackfile.js文件

4、配置webpack（我这里用到了common.js模块化，module.exports）

webpack中最重要的两块：entry(入口)和output(出口)

（1）entry：当入口有很多文件并且压缩到不同文件时，entry就是一个对象，前面的键是压缩后的文件名，值是文件路径。（他们都要用引号包起来），（一个项目有很多js，所以大多数都会用这种方法）。如果只有一个js就entry:'./src/js/index.js',写。如果有两个js，并且压缩到一个文件下就 entry:['./src/js/index.js','./src/js/common.js'], 写。

（2）output：如果想把所有的js都压缩到一个文件下就filename:'name.js',写。如果要分开压缩就filename:'[name].js',写。

         path是压缩路径（压缩到哪）

（3）module：这块也很重要。尤其是rules，style-loader必须在css-loader前面；sass-loader必须在最后面（很重要，不然会报错）

//webpack配置项
const config = {
    //入口
    //entry:'./src/js/index.js',
    //entry:['./src/js/index.js','./src/js/common.js'],
    entry:{
        'index':'./src/js/index.js',
        'common':'./src/js/common.js',
    },
    //出口
    //__dirname   当前文件所在目录的绝对路径
    output:{
        //filename:'index.js',
        filename:'[name].js',
        path:__dirname + '/dist/',
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader','sass-loader'],
            },
            {
                test:/\.sass$/,
                use: ['style-loader','css-loader','sass-loader'],
            },
            {
                test:/\.html$/,
                // use:['html-loader'],
                use:{
                    loader:'html-loader',
                    options: {
                        attrs: [':data-src'],
                    }
                }
                
            },
            {
                test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader:'url-loader',
                options:{
                    limit:10000,
                    name:'../img/[name].[ext]'
                }
            },
            {
                test:/\.(woff2|eot|ttf|otf)(\?.*)?$/,
                loader:'url-loader',
                options:{
                    limit:10000,
                    name:'font/[name].[ext]'
                }
            },
        ]
    },
    // plugins:[
    //     //html模板
    //     new HtmlWebpackPlugin({

    //     }),
    // ]
};

//导出配置项

module.exports = config;

如果我写的对你没有帮助到你，请参考https://www.webpackjs.com/concepts/