文章引用自：webpack打包配置

创建项目

npm init -y //快速生成package.json文件。

第一步

三大件

webpack 本身
webpack-cli webpack 脚手架
webpack-dev-server 开发者服务器

第二步

处理js ES6,7,8 装饰器等

babel-loader@7  目前用版本7，用于es的转换
babel-core
babel-preset-env

上面这三个用于转换ES6的，那么ES7,ES8呢，我们需要
babel-plugin-transform-runtime
我们还需要装饰器的转换，我们还需要两个转换
babel-plugin-transform-decorators
babel-plugin-transform-decorators-legacy

第三步

处理Sass->css->style

我们写css一般用sass来做，然后我们就需要生成css然后再话到内部样式表中
sass-loader
node-sass
css-loader
style-loader

另外我们还可以安装
postcss-loader
autoprefix
我们有些css需要加前缀，需要处理，就可使用这两个包

第四步

处理模板

ejs-loader      //处理ejs,tpl等后缀模板，我们可在配置文件中配置

第五步

处理html

html-webpack-plugin

可以压缩html ,也可以增加trunk:css引用文件

开始安装

    npm i 
    --save-dev 安装在开发环境下，如转es6的工具，上线之后是不需要的，简写：-D
    --save     安装在生产环境下，在生产环境依然需要使用，如ejs等，简写：-S
    --registry=https://registry.npm.taobao.org  切换淘宝源

    npm i -D webpack webpack-cli webpack-dev-server babel-loader babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-transform-decorators babel-plugin-transform-decorators-legacy sass-loader  node-sass css-loader style-loader ejs-loader html-webpack-plugin --registry=https://registry.npm.taobao.org 

    cnpm i -D webpack webpack-cli webpack-dev-server babel-loader babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-transform-decorators babel-plugin-transform-decorators-legacy sass-loader  node-sass css-loader style-loader ejs-loader html-webpack-plugin 

    cnpm i -D webpack webpack-cli webpack-dev-server babel-loader@7 babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-transform-decorators babel-plugin-transform-decorators-legacy sass-loader  node-sass css-loader style-loader ejs-loader html-webpack-plugin 

添加配置

webpack.config.js

这个文件是导出一个对象，所以module.exports={}

    const HtmlWebpackPlugin = require('html-webpack-plugin'),//导入插件
          path = require('path');//用于获取路径
    module.exports = {
        mode:'development', //development,production 生产环境会去除注释等
        entry:,             //如果多入口，可以使用{}对象写，如果是单入口，直接写即可，html对应
        output:{
            path:,          //打包后路径，一般我们用/dist
            filename:'js/[name].js',      //生成的文件名
        },
        module:{
            rules:[ //我们在上面安装的库，如何使用，在这里定义规则，一个规则就是一个对象{}
                {
                    //翻译：匹配test正则出的文件名，要使用什么样的loader,观察我们的上面npm安装的库，有非常多的loader
                    test:/\.js$/,       //.js结尾的
                    loader:'babel-loader',
                    //由于依赖都在node_modules，我们不会更改，里面也有非常多js文件，我们不需要把它们执行规则，我们就可以把它们排除出去。你babel-loader不要去node_modules编译。
                    exclude:
                },
                //css
                {
                    test:/\.css$/,  //css结尾的，需要什么loader
                    //loader:
                    use:[

                    ]
                    //如果loader是多个的话，我们就不能用loader了，就需要用use数组
                },
                //sass
                {
                    test:/\.scss$/,    //
                    use:[

                    ]
                },
                //模板
                {
                    test:/\.tpl$/,  //模板名字，我们可以自定义，当然一般用tpl
                    loader:
                }
            ]
        },
        plugins:[    //实例数组
            new HtmlWebpackPlugin({})
        ],
        //配置webpack-dev-server,常用下面三个配置。
        devServer:{
            open:true,//当我启动server时，自动打开浏览器
            host:'localhost',
            port:3300
        }
    }

一般的来说，我们下载的库,loader(名字中包含loader的包)都不需要导入，而plugin一般需要导入。
如 const HtmlWebpackPlugin = reqire('html-webpack-plugin');
我们在plugin块中，可以直new ，插件就是一个构造函数，我们直接 new即可。

    const HtmlWebpackPlugin = require('html-webpack-plugin'),
          path = require('path');
    module.exports = {
        mode:'development', 
        entry:{
            index:path.resolve(__dirname,'./src/js/index.js'),
        },            
        output:{
            path:path.resolve(__dirname,'./dist'),          
            filename:'js/[name].js',      
        },
        module:{
            rules:[ 
                {
                    test:/\.js$/,
                    loader:'babel-loader',
                    exclude:path:path.resolve(__dirname,'node_modules')
                },
                {
                    test:/\.css$/,
                    use:[
                        //顺序不可改，因为执行是倒序的，执行需要按现在倒序的顺序执行。
                        'style-loader',
                        'css-loader'
                    ]
                },
                {
                    test:/\.scss$/,
                    use:[
                        'style-loader',
                        'css-loader',
                        'sass-loader'
                    ]
                },
                {
                    test:/\.tpl$/,
                    loader:'ejs-loader'
                }
            ]
        },
        plugins:[
            new HtmlWebpackPlugin({
                //打包后的filename是什么
                filename:'index.html',
                template:path.resolve(__dirname,'./src/index.html'),
                chunks:[
                    'index',//如果有jquery,
                ],
                excludeChunks:['node_modules']//排除
            })
        ],
        devServer:{
            open:true,
            host:'localhost',
            port:3300
        }
    }

运行

我们现在已经配置完了，我们可以把配置放在package.json中进行工作了。
我们可以在package.json的scripts下面放上脚本：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.config.js",
    "webpack":"webpack --config webpack.config.js"
  },

之后执行
//运行server
npm run dev
//打包
npm run webpack