Webpack - Githubissues

安装webpack

在webpack4.0以上版本中，需要先安装 webpack 再安装 webpack-cli . 在一个新项目中先用npm init 初始化项目，生成package.json ，再局部安装webpack 和 webpack-cli.

由于webpack作为一个打包工具，在生产环境中是不需要的，因此要在安装时加上 --save-dev

loader

对于非js文件，webpack是无法直接打包的。这时候需要用loader把CSS，SCSS以及各种图片和文件资源加载进去。常用的有 css-loader style-loader file-loader 等。这些也是开发依赖。 css-loader或sass-loader要和style-loader一起用。下载sass-loader必须也要下载node-sass.

webpack.config.js

这是webpack的配置文件。在里面可以配置： 入口出口 loader 插件模式等。

使用postcss进行处理：

把css提取成单独文件

把样式提取成单独文件后在html里不引用css就没有样式。 步骤： 1.安装mini-css-extract-plugin 2.新建一个生产环境的配置文件：webpack.product.config.js并把mode改为production。开头 const MiniCssExtractPlugin = require('插件') 3.把module里的style-loader（用于注入样式到HTML中）换成引入的MiniCssExtractPlugin.loader 4.添加插件

plugins:[
new MiniCssExtractPlugin({
            filename:'[name].css',
            chunkFilename:'[id].css'
        }),
]

另外在webpack时要指定配置文件为新建的生产环境的配置文件。

压缩css和js

压缩css 1.安装optimize-css-assets-webpack-plugin，并const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 2.添加：

optimization:{
        minimizer:[new OptimizeCSSAssetsPlugin({})]
    }

压缩js 使用插件： uglifyjs-webpack-plugin .使用这个的前提条件就是要在生产环境中使用然后require进来

optimization:{
        minimizer:[
            new OptimizeCSSAssetsPlugin({}), //压缩css
            new UglifyJsPlugin({
                cache:true, parallel:true, sourceMap:true
                //cache指js没变就不会重复压缩
            })
        ]

文件名输出Hash值

在输出文件名时带上[hash]. 为了让带Hash值的js和css文件可以引入到html中且不用随hash值变动而手动更改引入，需要使用HtmlWebpackPlugin。使用此插件会生产新的HTML文件，因此需要在配置插件时把原有HTML文件作为模板引入到新HTML里。模板HTML不需要引入任何js和css,打包后会自动把打包的css和js引入。

js的sourcemap

在开发阶段，只需要在开发配置文件里添加 devtool:'inline-source-map', 就可以开启。

监控自动编译

在启动webpack时添加--watch

热更新

webpack-dev-server提供了一个简单的web服务器，并可以实时热更新。

LastPoem / Notes

Webpack #23