WebPack(模块打包机)

作用

• 打包：多个JavaScript->一个文件
• 转换：拓展语言->普通JavaScript
• 优化：优化性能

安装

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

!问题：版本兼容问题导致安装失败(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:[],
    //服务
    devServer:{
        ···
    }
}

服务

//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={
    ···
    //服务
    devServer:{
        contentBase:path.resolve(__dirname,'dist'),
        host:'localhost',
        compress:true,
        port:1717
    }
}
//3.运行
npm run server

loader 的使用

//1.安装需要的loader
cnpm install style-loader --save-dev//css中的Url
cnpm install css-loader --save-dev//css中的标签
//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自带无需安装
//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'
        })
    ],
    ···
}