This is the 12th day of my participation in the Gwen Challenge.More article challenges

Come on, come on, get day11

6. Loader

Loader loader loader Loader Loader Loader loader loader

  • Babel-loader: Enables the next generation of JS files to be converted into js files that modern browsers can support.
  • Babel is a little bit complicated, so most people will create a new one
  • Css-loader,style-loader: These two suggestions are used together to parse CSS files. They can interpret @import and URL (). If you need to parse less, add a less-loader to the end
  • File-loader: The generated file name is the MD5 hash of the file content and retains the original extension of the referenced resource
  • Url-loader: functions like file-loader, but returns a DataURL if the file size is below the specified limit. In fact, NPM will tell you what is missing from less, SCSS, or stylus, and you can just install it

7. Plugins

Plugins can easily be confused with loaders. What’s the difference between external references? In fact they are two very different things. So loaders is responsible for processing source files such as CSS and JSX, one file at a time. Plugins, on the other hand, do not operate directly on individual files; they contribute directly to the entire build process. Here are some common plugins and their uses

ExtractTextWebpackPlugin: it will be referenced in the CSS file, entrance are packaged are independent of the CSS file, not embedded in js packaging file. Here’s the application

var ExtractTextPlugin = require('extract-text-webpack-plugin')
        var lessRules = {
            use: [{loader: 'css-loader'},
                {loader: 'less-loader'}}]var baseConfig = {
            module: {
                rules: [
                    // ...
                    {test: /\.less$/, use: ExtractTextPlugin.extract(lessRules)}
                ]
            },
            plugins: [
                new ExtractTextPlugin('main.css')]}Copy the code

HtmlWebpackPlugin:

What it does: Generates a new index.html that automatically references your packed JS file, based on a simple index.html template

var HTMLWebpackPlugin = require('html-webpack-plugin')
            var baseConfig = {
                // ...
                plugins: [
                    new HTMLWebpackPlugin()
                ]
            } 
Copy the code

HotModuleReplacementPlugin: it allows you to modify the component code, refresh automatically real-time preview the results of the modified attention never use HMR in a production environment.

Usage such as new webpack. HotModuleReplacementPlugin ()

The entire contents of webapck.config.js

const webpack = require("webpack")
        const HtmlWebpackPlugin = require("html-webpack-plugin")
        var ExtractTextPlugin = require('extract-text-webpack-plugin')
        var lessRules = {
            use: [{loader: 'css-loader'},
                {loader: 'less-loader'}}]module.exports = {
            entry: {
                    main: './src/index.js'
                },
                output: {
                    filename: '[name].js'.path: path.resolve('./build')},devServer: {
                    contentBase: '/src'.historyApiFallback: true.inline: true.hot: true
                },
                module: {
                    rules: [{test: /\.less$/, use: ExtractTextPlugin.extract(lessRules)}
                    ]
                },
                plugins: [
                new ExtractTextPlugin('main.css')]}Copy the code