This is the 27th day of my participation in Gwen Challenge

[Webpack series of articles in serial…]

1. Multi-entry construction

Dynamically build entry and create multi-entry HTML template files.

Glob

Glob module, allowing the use of ** and other symbols to write a glob rule, matching the corresponding rules of the file. Basic usage is as follows:

/ / file: Var path = require('path') var matchFilePattern = path.resolve(__dirname,) var matchFilePattern = path.resolve(__dirname,) Glob (matchFilePattern), function (er, {the console. The log files) (files) / / / D: / webpackDemo/SRC/glob. Js]}) synchronous writing / / var files = glob. Sync (matchFilePattern)Copy the code

Multi-entry build scripts

const glob = require('glob') const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const SetMPA = ()=>{const entry = {} const htmlWebpackPlugins = [] // Match all index.js files in the SRC directory as entry files const entryFiles = glob.sync(__dirname,'./src/*/index.js') Object.keys(entryFiles).map((index)=>{ const entryFile = entryFiles[index] // Const match = entryfile. match(/ SRC \/(.*)\/index\.js/) const pageName = match && match[1] // Entry [pageName] = entryFile HTMLWebPackplugins. push(new HtmlWebpackPlugin({ template:path.join(__dirname,`src/${pageName}/index.html`), filename:`${pageName}.html`, chunks:[pageName], inject:true, minify:{ html5:true, collapseWhitespace:true, preserveLineBreaks:false, minifyCSS:true, minifyJS:true, removeComments:false } }) ) }) return { entry, htmlWebpackPlugins } } const {entry,htmlWebpackPlugins} = setMPA()Copy the code

2. CSS related processing and transformation from PX to REM on the mobile terminal

1. CSS3 automatically adds prefixes

Through the PostCSS plug-in

{
  test:/.less$/,
  use:[
  	MiniCssExtractPlugin.loader,
    'css-loader',
    'less-loader',
    {
    	loader:'post-loader',
      options:{
      	plugins:()=>{
        	require('autoprefixer')({
          	browsers:['last 2 version','>1%','ios 7']
          })
        }
      }
    }
  ]
}
Copy the code

2. Mobile adaptation

  1. Use CSS media query to achieve responsive layout
@media screen and (max-width:980px){
	.header{width:900px}
}
@media screen and (max-width:480px){
  .header{width:400px}
}
@media screen and (max-width:350px){
  .header{width:300px}
}
Copy the code
  1. Turn the px rem

Rem is relative, px is absolute.

Implementation: Using px2REm-Loader and the Lib-flexible library of Handpan (calculating the font size value of the root element during page rendering)

{
  test:/.less$/,
  use:[
    MiniCssExtractPlugin.loader,
    'css-loader',
    'less-loader',
    {
      loader:'post-loader',
      options:{
      	plugins:()=>{
             require('autoprefixer')({
             browsers:['last 2 version','>1%','ios 7']
          })
        }
      }
    },
    {
      loader:'px2rem-loader',
      options:{
      	remUnit:75,
        remPrecision:8
      }
    }
  ]
}
Copy the code

3. Inline resources

The benefits of inlining resources include:

  1. Initialization script for the page frame

  2. Report relevant measures

  3. The CSS is inlined to avoid page flashing

  4. Reduce the number of HTTP network requests (inline urL-loader for small images or fonts)

<! -> <script>${require('raw-loader! babel-loader! ./meta.html')}</script> <! <script>${require('raw-loader! babel-loader! . /node_modules/lib-flexible')}</script> <! Module. exports = {module:{rules:[{test:/\. SCSS $/, use:[{loader:'style-loader', Options :{insertAt:'top', // style inserts into <head> Singleton :true, // Merge all style tags into one}}, 'CSS-loader ', 'sass-loader' ] } ] } } <! --4. CSS inline: html-inline-css-webpack-plugin -->Copy the code

4. Script separation

Optimization :{splitChunks:{// 'async' : // 'all': chunks are chunks:'all', // minSize:0, CacheGruops :{// Separate page common file Commons :{name:' Commons ', chunks:'all', minChunks:2}, / / public script separation vendors: {test: / / \ \ / nodule_modules \ \ / /, priority: - 10}, / / separation based package library: {test: / (react | react - dom) /, name:'library', chunks:'all' } } } } }Copy the code

5. To summarize

So far, I have learned the advanced usage of Webpack 1. The next chapter is about code segmentation and introduction, packaging JS library and SSR, etc.