Webpack learning Notes (5) – browser compatibility Settings, resource inlining, multi-page packaging

Css3 enhancements

Automatically complete the CSS3 prefix

Use postcss – loader

Use the post-processor (changed after code generation)autoprefixer plug-in (according to the Can I Use rule caniuse.com)

• 1. Install NPM I postCSs-loader autoprefixer -d
• 2. Webpack configurationGithub.com/postcss/aut…

  module.exports={
    module: {rules:[
        test:/\.css$/.use: ['style-loader'.'css-loader'.'postcss-loader']]}}Copy the code

• 3. Create the postcss.config.js file

  module.exports = {
    plugins: [
      require('autoprefixer')]Copy the code

}

* 4, package. Add browser support json version of the configuration > https://github.com/browserslist/browserslist#readme
```js
 "browserslist": [
  "last 1 version"."1%" >."IE 10"
]
Copy the code

• NPM run build

Px is automatically converted to REM

Px2rem-loader: Convert PX to REM;

Page rendering needs to know the font size of the root element: use the lib-flexible library

• 1, install,

  A, NPM I px2REm-loader -D (used for development)

  B, NPM I lib-flexible-s

• 2. Webpack adds configuration

  module.exports = {
    ...
    module:{
      rules: [{test:/\.scss$/.use: ['style-loader'.'css-loader'.'sass-loader',
          {
            loader:'px2rem-loader'.options: {remUnit:75.remPrecision:8}}]}}Copy the code

• 3. The font size of the root element needs to be calculated when the page is loaded, so the reference to lib-flexible needs to be preceded

  Add lib-flexible code to the generated HTML

Resources inline

The code level

Initialize the script or inline HTML

If there is es6 code, add babel-Loader and perform the conversion

• Install NPM I [email protected] -d

${require(‘… ‘)} read fetch, then insert

• Raw – loader inline HTML${require('raw-loader! ./meta.html')}
• Raw – loader inline js

2. Reporting point: JS/CSS is being loaded and completed

3. CSS inline:

For example, the style of the first screen is inlined into HTML to prevent the page from flashing

• Use the style-loader singleton:true// to merge all style tags into one

module.exports = {
  module: {rules: [{test:/\.scss$/.use:[
          {
            loader:'style-loader'.options: {insertAt:'top'.// Insert styles into 
              singleton:true// Merge all the style tags into one
            },
            'css-loader'.'sass-loader'}]}}Copy the code

• html-inline-css-webpack-plugin

Request layer: Reduces the number of HTTP network requests

• 1. Inline small images or fonts to the page (use url-loader to set limit)

The sample source code

Multi-page packaging

Multiple entries and htmlWebPackplugins need to be configured

File directory:

• 2. Create webPackentrys_glob. js

    const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const glob = require('glob')
    function setMPA(){
      const entryFiles = glob.sync(path.join(__dirname,'.. /mpa/*/index.js'))
      const entry = {}
      const htmlWebpackPlugins = []
      // console.log(entryFiles)
      entryFiles.forEach(key= >{
        const name = key.replace(/.*\/mpa\/(\w+)\/index\.js$/.'$1')
        entry[name] = key
        htmlWebpackPlugins.push(getHtmlWebpackPlugin(name))
      })
      return {entry,htmlWebpackPlugins}
    }
    function getHtmlWebpackPlugin(name){
      return new HtmlWebpackPlugin({
        template: path.join(__dirname,`.. /mpa/${name}/index.html`),/ / the template name
        filename: `${name}.html`./ / HTML file name
        chunks:[name],// Not set to insert all entry js into HTML
        inject: true.//true:[Boolean] Default value, script tag at the bottom of HTML file body; Body :[String] has the same function as true; Head :[String], the script tag is in the HEAD of the HTML; False: Do not insert the generated JS file
        //favicon: 'path/to/my_favicon.ico'
        minify:{// Compress the HTML file
          html5: true.collapseWhitespace: true.preserveLineBreaks: false.minifyCSS: true.minifyJS: true.removeComments: false}})}module.exports = {entry,htmlWebpackPlugins} = setMPA()
  Copy the code

  3. Reference in webpack file

  const {entry,htmlWebpackPlugins} = require('./src/util/webpackentrys_glob')
  module.exports = {
    entry:entry, ... plugins:[...] .contact(htmlWebpackPlugins)Copy the code

• You can also use require.context

The sample source code