自动打包工具 webpack 2

针对wepack学习1部分补充：

热更新部分

安装：npm install webpack-dev-server -D
webpack关于热更新服务器的配置：

module.exports={
    devServer:{
        port:3000,  //端口号
        progress:true,  //启动进程
        contentBase:'./build/',  //调试根路径位置
        compress:true  //压缩
    },
    ...
}

如果要用静态文件引入打包的JS文件，如果在热更新状态下，需要将引入路径指向 （调试路径contentBase）

html-webpack-plugin

根据模板，打包后自动生成html文件，并引入进JS打包文件
配置： 压缩信息、模板选择、新文件名定义

plugins:[
      new HtmlWebpackPlugin({ // 打包输出HTML
      title: 'Hello World app',
      minify: { // 压缩HTML文件
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true// 压缩内联css
      },
      hash:true,  
      filename: 'index.html',
      template: './src/template/index.html'  //模板文件路径
    })
]

缓存hash值 （防止缓存影响）

打包js增加hash值
所有的hash值的位数，自行定义即可

module.exports={
    ...,
        output:{
        path:path.resolve(__dirname,'build/'),
        filename:'bundle.[hash:5].js'  //打包文件 5位hash值
    },
    plugins:[
          new HtmlWebpackPlugin({ 
          minify: { 
            removeComments: false,
            collapseWhitespace: true,
            minifyCSS: true
          },
          hash:true,   //增加hash值
          filename: 'index.[hash:3].html', //模板文件 增加 3位的hash值
          template: path.resolve(__dirname,'src/template/index.html')
        }),
            new MiniCssExtractPlugin({
            filename:'main.min.[hash:8].css'  //样式提取到一个css，增加hash值
        })
    ]
}

将所有css提取到一个css文件中

安装：

npm install mini-css-extract-plugin -D

使用：
webpack.config.js中配置：

...
plugins:[
    //压缩文件配置
    new MiniCssExtractPlugin({
        filename:'main.min.css' //压缩后的新名
    })
]
....
module:{
    //压缩文件规则
        rules:[
        {test:/\.css$/,use:[
            MiniCssExtractPlugin.loader,
            'css-loader'
        ]}
    ]
}

css3格式兼容

安装：

npm install postcss-loader autoprefixer -D

使用：
安装新的格式要求，需要将浏览器配置信息挪到，package.json中，如：

"browserslist":[
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
]

在webpack.config.js中

{
   loader: 'postcss-loader',
   options: {
      sourceMap: true,
      config: {
        path: 'postcss.config.js'  // 这个得在项目根目录创建此文件
      }
   }
}

压缩css与js 打包文件

安装：

npm install optimize-css-assets-webpack-plugin -D //css压缩
npm install uglifyjs-webpack-plugin -D  //js压缩   

注意：
1.不能光压缩css,js也要压缩，否则JS不会压缩
2.js压缩需要babel模块支持，否则报错
3.css与js压缩仅能在 "production"模式下，生效
使用：
webpack.config.js中

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

optimization: {
    minimizer: [
        new OptimizeCSSAssetsPlugin({}),
        new UglifyJsPlugin({
            test: /\.js(\?.*)?$/i
        })
    ],
}

针对es6中类与装饰器

安装：

npm install @babel/plugin-proposal-class-properties -D  //类
npm install @babel/plugin-proposal-decorators -D  //装饰器

使用：

{
    test:/\.jsx?/i,
    exclude:/node_modules/,  //如果引入了node_modules中的包，不要编译
    use:{
        loader:'babel-loader',
        options:{
            presets:['@babel/preset-env'],
            plugins:[
                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                ["@babel/plugin-proposal-class-properties", { "loose": true }]
            ]
        }
    }   
}

html中image打包

说明：
webpack处理资源无往不利，但有个问题总是很苦恼，
html中直接使用img标签src加载图片的话，因为没有被依赖，图片将不会被打包。
这个loader解决这个问题，图片会被打包，而且路径也处理妥当。

安装：

npm install html-withimg-loader -D

使用：
在webpack.config.js中

rules:[ 
    {
        test:/\.html$/,
        use:'html-withimg-loader'
    }
]

暴露

以jquery为例
npm install jquery -S

//----将一个$依赖挂载到window上
安装：

npm install expose-loader -D

使用：
在模块中,

import $333 from 'expose-loader?$333!jquery';

console.log(window.$333); //可以找到
console.log($333); //可以找到

//----将一个$依赖挂载到所有模块上
安装：webpack webpackcli

使用:
在webpack.config.js中,

plugins:[
    new webpack.ProvidePlugin({
        $:'jquery'
    })
]

在任意模块内，可以使用$了，无需单独引入jquery库