文章引用自：webpack打包配置

創(chuàng)建項(xiàng)目

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

第一步

三大件

webpack 本身
webpack-cli webpack 腳手架
webpack-dev-server 開發(fā)者服務(wù)器

第二步

處理js ES6,7,8 裝飾器等

babel-loader@7  目前用版本7，用于es的轉(zhuǎn)換
babel-core
babel-preset-env

上面這三個(gè)用于轉(zhuǎn)換ES6的，那么ES7,ES8呢，我們需要
babel-plugin-transform-runtime
我們還需要裝飾器的轉(zhuǎn)換，我們還需要兩個(gè)轉(zhuǎn)換
babel-plugin-transform-decorators
babel-plugin-transform-decorators-legacy

第三步

處理Sass->css->style

我們寫css一般用sass來做，然后我們就需要生成css然后再話到內(nèi)部樣式表中
sass-loader
node-sass
css-loader
style-loader

另外我們還可以安裝
postcss-loader
autoprefix
我們有些css需要加前綴，需要處理，就可使用這兩個(gè)包

第四步

處理模板

ejs-loader      //處理ejs,tpl等后綴模板，我們可在配置文件中配置

第五步

處理html

html-webpack-plugin

可以壓縮html ,也可以增加trunk:css引用文件

開始安裝

    npm i 
    --save-dev 安裝在開發(fā)環(huán)境下，如轉(zhuǎn)es6的工具，上線之后是不需要的，簡寫：-D
    --save     安裝在生產(chǎn)環(huán)境下，在生產(chǎn)環(huán)境依然需要使用，如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

這個(gè)文件是導(dǎo)出一個(gè)對象，所以module.exports={}

    const HtmlWebpackPlugin = require('html-webpack-plugin'),//導(dǎo)入插件
          path = require('path');//用于獲取路徑
    module.exports = {
        mode:'development', //development,production 生產(chǎn)環(huán)境會去除注釋等
        entry:,             //如果多入口，可以使用{}對象寫，如果是單入口，直接寫即可，html對應(yīng)
        output:{
            path:,          //打包后路徑，一般我們用/dist
            filename:'js/[name].js',      //生成的文件名
        },
        module:{
            rules:[ //我們在上面安裝的庫，如何使用，在這里定義規(guī)則，一個(gè)規(guī)則就是一個(gè)對象{}
                {
                    //翻譯：匹配test正則出的文件名，要使用什么樣的loader,觀察我們的上面npm安裝的庫，有非常多的loader
                    test:/\.js$/,       //.js結(jié)尾的
                    loader:'babel-loader',
                    //由于依賴都在node_modules，我們不會更改，里面也有非常多js文件，我們不需要把它們執(zhí)行規(guī)則，我們就可以把它們排除出去。你babel-loader不要去node_modules編譯。
                    exclude:
                },
                //css
                {
                    test:/\.css$/,  //css結(jié)尾的，需要什么loader
                    //loader:
                    use:[

                    ]
                    //如果loader是多個(gè)的話，我們就不能用loader了，就需要用use數(shù)組
                },
                //sass
                {
                    test:/\.scss$/,    //
                    use:[

                    ]
                },
                //模板
                {
                    test:/\.tpl$/,  //模板名字，我們可以自定義，當(dāng)然一般用tpl
                    loader:
                }
            ]
        },
        plugins:[    //實(shí)例數(shù)組
            new HtmlWebpackPlugin({})
        ],
        //配置webpack-dev-server,常用下面三個(gè)配置。
        devServer:{
            open:true,//當(dāng)我啟動(dòng)server時(shí)，自動(dòng)打開瀏覽器
            host:'localhost',
            port:3300
        }
    }

一般的來說，我們下載的庫,loader(名字中包含loader的包)都不需要導(dǎo)入，而plugin一般需要導(dǎo)入。
如 const HtmlWebpackPlugin = reqire('html-webpack-plugin');
我們在plugin塊中，可以直new ，插件就是一個(gè)構(gòu)造函數(shù)，我們直接 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:[
                        //順序不可改，因?yàn)閳?zhí)行是倒序的，執(zhí)行需要按現(xiàn)在倒序的順序執(zhí)行。
                        '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
        }
    }

運(yùn)行

我們現(xiàn)在已經(jīng)配置完了，我們可以把配置放在package.json中進(jìn)行工作了。
我們可以在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"
  },

之后執(zhí)行
//運(yùn)行server
npm run dev
//打包
npm run webpack