First, front-end build tools

  1. grunt
  2. gulp
  3. Webpack (mainstream, webpack.js.org/)
  4. Fis3 (Baidu)

What is Webpack

Webpack is a stable version of WebPack: V4.44, a static module packer for modern JavaScript applications

How to use WebPack to build a front-end ring

  1. Installation node. Js (v12. X)
Note: if the NPM install some packages due to speed, slow mirror switch the source into taobao image installation: NPM config set registry https://registry.npm.taobao.org see if change come over: NPM config list Press EnterCopy the code

2. Create the project directory and initialize package.json

By default, the package.json file NPM init -y is createdCopy the code

3. Install WebPack and webpack-CLI

npm install webpack webpack-cli --save-dev

- NPM I webpack webpack-cli -d

4. Run webPack test CommonJS specification: Based on server side modularity specification, Node output

Modules. Exports import: requireCopy the code

5. File types supported by WebPack

By default, only JS and JSON files are supported. Note: If you want to import other file types such as.css,.png, font files, or any other file types, you need to install a proper loader to parse themCopy the code

6. Webpack configuration file

Default configuration file name: The webpack --config webpack.dev.config.js configuration file is the core of WebPack. All loader and plug-in environments and runtime environment configurations are configured in the configuration fileCopy the code

Such as:

// Introduce webpack, const webpack = require('webpack') Const path = require('path') // Create a configuration object const config = {// configure entry entry: './ SRC /main.js', // Configure exit output: {// export path:path.resolve(__dirName,'dist'), // export filename:'bundle.js'}} module.exports = config;Copy the code

7. Configure various Loaders (file resolvers)

  • Parse the CSS loader
  • Parse images from file-loader and URl-loader
  • Parsing ES6/7/8/9/10… babel
Step 1: NPM install --save-dev babel-loader@babel/core@babel /preset-env Step 2: Create a. Babelrc file in the project root directory and write {"presets": ["@babel/preset-env"]} step 3: Configure loader Module: {rules: [{test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }Copy the code

8. Automatically clean files

NPM install clean-webpack-plugin --save-dev introduce const {CleanWebpackPlugin} = require('clean-webpack-plugin'); Use: // to create a configuration object const config = {..... , plugins: [ new CleanWebpackPlugin() ] }Copy the code

Automatically inject HTML

NPM install --save-dev html-webpack-plugin // Create a configuration object const config = {.... New HtmlWebpackPlugin({template:}), plugins: [// automatically clean new CleanWebpackPlugin(), // automatically inject HTML into new HtmlWebpackPlugin({template:}) './src/index.html', filename:'home.html' }), ] }Copy the code

10. Running environment

Webpack-dev-server webpack-dev-server: {contentBase: path.join(__dirname, "dist"), // listen to running directory port: 9999, // run port number hot:true // hot update}Copy the code

11. Webpack Core Concepts:

Entry: main entry point to project execution Exit: output Build output file path and file name Loader: Loader Convert files (resources) type not recognized by WebPack Plug-in: plugins In order to extend webPack functionality, for example: Clean up files, automatically inject Html mode: Mode switch between development and production environment

12. Integration with VUE

Vue-loader: parses the VUE file vue-template-compiler

Install: NPM install vue-loader vue-template-compiler -d Configure webpack file: {test:/. Vue $/,use:[‘vue-loader’]},

Const {vueLoaderPlugin}=require(‘ vueLoaderPlugin ‘), plugins: [new vueLoaderPlugin ()]

13. Integrate with LESS

NPM install less-loader less -d Configuration: module: {rules: [ {test:/.less$/,use:[‘style-loader’,’css-loader’,’less-loader’]}, ] },

14. Integration with SASSCopy the code

NPM install sass-loader nod-sass -d module: {rules: [{test: /. (SCSS | sass) $/, use: [‘ style – loader ‘, ‘CSS – loader’, ‘sass – loader]},]}, sass common syntax: www.cnblogs.com/chyingp/p/s…

15 and the vue - the routerCopy the code

Install: NPM install vue-router-d

16. Integration with VUEX

NPM install vuex -d You may need an appropriate loader to handle this file type

16. The complete webpack.config.js file is as follows:

/ Introduced WebPack, mainly used to call webPack built-in plug-insconst webpack = require('webpack')
    // Import path to process the path
const path = require('path')
    // Introduce the cleanup plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// Introduce htmlwebpckPlugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
    / / introduce VueLoaderPlugin
const { VueLoaderPlugin } = require('vue-loader')

// Create a configuration object
const config = {
    // Online and offline environments
    mode: 'production'.// Configuration entry
    entry: './src/main.js'.// Configure the egress
    output: {
        // Exit path
        path: path.resolve(__dirname, 'dist'),
        // Export file name
        filename: 'bundle.js'
    },
    module: {
        rules: [
            // {test:/\. Type of file to parse $/,use:[' loader to use ']},
            { test: /\.css$/, use: ['style-loader'.'css-loader'] {},test: /\.less$/, use: ['style-loader'.'css-loader'.'less-loader'] {},test: /\.(scss|sass)$/, use: ['style-loader'.'css-loader'.'sass-loader'] {},test: /\.css$/, use: ['style-loader'.'css-loader'] {},test: /\.vue$/, use: ['vue-loader'] {},test: /\.(png|jpg|jpeg|gif)$/, use: ['file-loader'] {},test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}},// Missing file types
    resolve: {
        extensions: ['.js'.'.json'.'.vue']},plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html'.filename: 'index.html'
        }),
        new webpack.BannerPlugin('Entry to the project'),
        new VueLoaderPlugin()
    ],
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        port: 9999.hot: true}}module.exports = config;
Copy the code

In summary, this is the foundation for building the environment of WePack. I hope this article is helpful to you

Finally, additional novice tutorial on www.runoob.com/w3cnote/web…