hujiahua/webpack-learing

Нема описа

胡家华 b24607b133 通用多文件打包		пре 5 година
src	b24607b133 通用多文件打包	пре 5 година
.babelrc	b24607b133 通用多文件打包	пре 5 година
.gitignore	b24607b133 通用多文件打包	пре 5 година
README.md	b24607b133 通用多文件打包	пре 5 година
package.json	b24607b133 通用多文件打包	пре 5 година
webpack.dev.js	b24607b133 通用多文件打包	пре 5 година
webpack.prod.js	b24607b133 通用多文件打包	пре 5 година
yarn.lock	b24607b133 通用多文件打包	пре 5 година

插件记录

多页面应用匹配入口文件

使用glob插件，glob.sync(path.join(__dirname ,"./src/*/index.js"))方法会匹配src目录下
所有等文件夹中等index.js入口文件(开发按照约定，入口文件为index.js)

设置打包后到模板页以及注入js，css等 `HtmlWebpackPlugin`

new HtmlWebpackPlugin({
template: path.join(__dirname, `src/${pageName}/index.html`),
filename: `${pageName}.html`,
chunks: [pageName],
inject: true, // 注入css/js
minify: { // 模板格式设置
html5:true,
collapseWhitespace: true ,
preserveLicenseComments: false ,
minifyJS: true ,
minifyCSS: true,
removeComments: true,
}
})

支持react，jsx，es6/7新特性

需要使用 @babel/core @babel/preset-react @babel/preset-env babel-loader
需要新建.babelrc文件且加入 { "presets": [ "@babel/preset-env", "@babel/preset-react" ] }

js优化

webpack 4 版本自带了UglifyJsPlugin插件，会对js进行压缩

css优化
压缩cssOptimizeCSSAssetsPlugin，需要用到cssnano库
```
new OptimizeCSSAssetsPlugin({ // 压缩css
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano')
}),
```
如果module.rules中使用了style-loader css-loader less-loader此时会将css压缩至css中
可通过MiniCssExtractPlugin生成单独css文件

css自动补全前缀postcss-loader和autoprefixer

{
loader: 'postcss-loader',
options: {
plugins: () => [
  require('autoprefixer')({ // 自动补全
    overrideBrowserslist:["last 2 version", ">1%", 'ios 7'],
  })
]
}
}

移动端rem单位转换px2rem-loader，同时通过raw-loader包内联静态资源文件引入node_modules/lib-flexible/flexible.js(需下载lib-flexible库，且需要安装到正式环境到依赖yarn add lib-flexible -S)
```
{
loader: "px2rem-loader",
options: {
remUnit: 75, // 1rem = 75px
remPrecesion: 8, // px转换rem到小数位
}
}
```

在index.html模板页引入内联资源

// 静态资源导入
<script type="text/javascript">
// 静态资源导入
${require('raw-loader!babel-loader!../../node_modules/lib-flexible/flexible.js')}
</script>

<head>
  <!-- 静态资源导入 -->
  ${require('raw-loader!./meta.html')}
</head>

文件指纹 hash,chunkhash,contenthash

hash

一旦文件改变，重新打包将会导致整个项目hash改变，整个项目的缓存将失效
chunkhash

根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值,在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。

但是这样又有一个问题，因为我们是将样式作为模块import到JavaScript文件中的，所以它们的chunkhash是一致的
contenthash

contenthash是针对文件内容级别的，只有你自己模块的内容变了，那么hash值才改变

解决办法：对入口文件使用chunkhash,对css文件使用contenthash,如果对css使用文件指纹，需要取消使用style-loader,因为前者是生成hash css文件，后者是将css打入html中

output: {
  path: path.join(__dirname, 'dist'),
  filename: '[name]_[chunkhash:8].js' // chunkhash
},

plugins:[
  new MiniCssExtractPlugin({
    filename: '[name]_[contenthash:8].css' // contenthash
  })
]

module: {
  rules:[
    {
    test: /.less$/,
    use:[
      // 'style-loader',// 将css插入到html style标签，如果要使用contenthash生成css文件，需要注释
      MiniCssExtractPlugin.loader ,
      'css-loader',
      'less-loader'
    ]
    }
  ]
}

文件压缩

url-loader

rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [{
  loader: 'url-loader',
  options: {
    limit: 8192, // 限制大小
  },
}],
},
]

辅助工具

CleanWebpackPlugin 构建完成之前删除dist目录
```
plugins:[
new CleanWebpackPlugin()
]
```

README.md

插件记录

多页面应用 匹配入口文件

设置打包后到模板页以及注入js，css等 HtmlWebpackPlugin