Preface: the author study webpack knowledge from the foundation to the principle to write a series, in order to review. Hope to help more friends who are learning Webpack.

Webpack series learning – First experience

Webpack series learning – Basic Usage one

Webpack series learning – various loaders to use

Webpack series learning – hot update and compression

Automatic cleanup of build catalog artifacts

  • Use the clean – webpack – the plugin
  • The installation
npm i clean-webpack-plugin
Copy the code
  • use
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    module.exports = {
        plugins: [new CleanWebpackPlugin()
        ]
    }
Copy the code
  • As a result: After packing the NPM run build twice, you can see that there is only one dist directory

PostCss plug-in Autoprefixer automatically adds cSS3 prefixes

  • Install PostCSS and autoprefixer
 npm i postcss-loader autoprefixer -D
Copy the code
  • use
module.exports = {
        module: [{test: /\.less/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader'.'less-loader',
                {
                    loader:'postcss-loader'.options: {plugins: () = > [
                            require('autoprefixer') ({overrideBrowserslist: ['last 2 version'.'> 1%'.'ios 7']}}]}}Copy the code
  • Result: Once packed, you can see that CSS3 is automatically prefixed

The PX of CSS on mobile is automatically converted to REM

  • Use px2rem – loader
  • The font-size value of the root element is calculated when the page is rendered
    • Here you can use the Lib-Flexible library of Hand Cleaning
    • Github.com/amfe/lib-fl…
  • The installation
npm i px2rem-loader -D
npm i lib-flexible -S
Copy the code
  • use
// webpack.config.js
     module.exports = {
         module: [{test:/\.less/,
             use:[
                 'css-loader'.'less-loader',
                 {
                     loader:'px2rem-loader'.options: {remUnit:75.remPrecesion:8,}}]}]}Copy the code
  • After packaging, PX is automatically converted to REM
  • To introduce lib-flexible in HTML files, you must introduce it in head
  • This will work on mobile devices

Static resources are inlined

Meaning of resource inlining

  • The code level
    • Initialization script for the page frame
    • Report relevant measures
    • The CSS is inlined to avoid page flashing
  • Request level
    • Reduce the number of HTTP requests

HTML, JS, CSS inline

  • Raw – loader inline HTML
<script>${require('raw-loader! babel-loader! ./meta.html')}</script>Copy the code
  • Raw – loader inline js
<script>$; {require('raw-loader! babel-loader! ./index.js')}</script>Copy the code
  • CSS inline
    • With the help of style – loader
    • html-inline-css-webpack-plugin
module.exports={
        module: {rules: [{test:/\.less/.
                use: [{loader:'style-loader'.options: {insertAt:'top'.// Style is inserted into head
                        singleton:true.// Merge all the style tags into one}}]}}Copy the code

Multi-page packaging universal solution

  • Dynamically get entry and set html-webpack-plugin
  • Using the glob. Sync
entry: glob.sync(path.join(__dirname,'./src/*/index.js'))
Copy the code
  • Install the glob library
 npm i glob -D
Copy the code
  • The source directory needs to follow these rules
    • Create each folder in the SRC directory, such as the search folder. In the search folder, create index.html and index.js. Everything else.
  • Use: dynamically get entry and htmlWebpackPlugin
const setMPA = () = > {
        const entry = {};
        const HtmlWebpackPlugins = [];

        // Match the folder to each module
        const entryFiles = glob.sync(path.join(__dirname,'./src/*/index.js'))
        Object.keys(entryFiles).map(index= > {
            const entryFile = entryFiles[index]; // Get the path of each js file
            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()
    module.exports = {
        entry:entry,
        // ...
        plugins:[...HtmlWebpackPlugins]
    }
Copy the code

source-map

  • Action: Locate source code using source map
  • The development environment is on, the online environment is off.
    • Online troubleshooting is suitable for uploading the Source Map to the error monitoring system
  • Source map keyword
    • Eval: Wrap module code in eval
    • Source map: generates a. Map file
    • Cheap: Does not contain column information
    • Inline: embed. Map as DataURI, do not generate a separate. Map file
    • Module: Sourcemap containing the loader

  • use
 module.exports = {
        // ...
        devServer: {contentBase:'./dist'.hot: true
        },
        devtool:'source-map'
    }
Copy the code
  • Run to generate a.map file

The above code is posted on Github

Debug can be downloaded.