WebPack(模塊打包機(jī))

作用

• 打包：多個(gè)JavaScript->一個(gè)文件
• 轉(zhuǎn)換：拓展語(yǔ)言->普通JavaScript
• 優(yōu)化：優(yōu)化性能

安裝

cnpm i -g webpack
cnpm i -g webpack-cli
npm init
cnpm i webpack --save-dev
webpack -v

!問題：版本兼容問題導(dǎo)致安裝失敗(Cannot find module 'webpack-cli/package.json')

--解決方案
//卸載版本
cnpm uninstall webpack -g
cnpm uninstall -g webpack-dev-server
//安裝指定版本
cnpm install webpack@3.8.0 -g
cnpm install webpack-dev-server@2.9.7 -g
webpack -v

WebPack 的使用

webpack.config.js

const path = require('path');
module.exports={
    //入口
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    //出口
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'
    },
    //模塊
    module:{
        ···
    },
    //插件
    plugins:[],
    //服務(wù)
    devServer:{
        ···
    }
}

服務(wù)

//1.安裝(注意版本兼容問題)
cnpm i -g webpack-dev-server --save-dev
//2.配置
./package.json
{
  ···
  "scripts": {
    "server": "webpack-dev-server",
    ···
  },
  ···
}
./webpack.config.js
const path = require('path');
module.exports={
    ···
    //服務(wù)
    devServer:{
        contentBase:path.resolve(__dirname,'dist'),
        host:'localhost',
        compress:true,
        port:1717
    }
}
//3.運(yùn)行
npm run server

loader 的使用

//1.安裝需要的loader
cnpm install style-loader --save-dev//css中的Url
cnpm install css-loader --save-dev//css中的標(biāo)簽
//2.配置
./webpack.config.js
...
module.exports={
    ...
    //模塊
    module:{
        rules:[{
            test:/\.css$/,
            use:['style-loader','css-loader']
        }]
    },
    ...
}

插件-JS壓縮

//1.安裝
-- cnpm i uglifyjs-webpack-plugin --save-dev
webpack自帶無(wú)需安裝
//2.配置
./webpack.config.js
···
const uglify =require('uglifyjs-webpack-plugin');

module.exports={
    ···
    //插件
    plugins:[
        new uglify()
    ],
    ···
}
//3.使用
npm run server

打包html文件

//1.安裝
cnpm i html-webpack-plugin --save-dev
//2.配置
···
const htmlPlugin = require('html-webpack-plugin');

module.exports={
    ···
    //插件
    plugins:[
        ···
        new htmlPlugin({
            minify:{
                removeAttrubuteQuotes:true
            },
            hash:true,
            template:'./src/index.html'
        })
    ],
    ···
}