webpack Core Concept and Introduction

 

Tips: webpak packing principle:

Start file from the inlet provided all the files packaged file is dependent index.js

For example: less files

All dependent files have to be introduced index.js file import Import

To establish links between files

 

First create webpack.config.js ===== execute commands webpack

It can be a single or a plurality of outlet :()

Inlet starting point (entry point) indicates which module webpack should be used to build as the internal dependency graph begins. After the entrance to the starting point, webpack will find out which modules and libraries are the starting point of entry (direct and indirect) dependent.

//必须有这个
const path = require('path');
//单入口模式
    // entry: './src/index.js',
    //多入口模式
    entry: {
        index: './src/index.js',
        app: './src/app.js'
    },

Export:

output  attribute tells webpack output where it creates  bundles , and how to name the files, the default value  ./dist. Basically, the entire application structure, will be compiled into a file you specify the output path folder.

 //出口配置
    output: {
        path: path.resolve(__dirname, 'dist'),
        //__dirname 找到该配置文件
        //dist字符串 表示将打包的文件输出的文件夹 如果没有自动创建
        filename: '[name].bundle.js'
            //[name]自动匹配入口文件生成自己的名字 记得指明入口文件名称
    },

Module (loader):

loader  make webpack able to deal with those non-JavaScript files (webpack itself only understand JavaScript). loader can convert all types of files that can be handled effectively webpack module , then you can use packaged ability webpack, and to process them.

Essentially, webpack loader all types of files, is converted to the module dependency diagram of the application (and eventually the bundle) can be directly referenced.

1. test Attribute for identifying the corresponding loader should be performed or a certain file conversion.
2. use When the attribute of the conversion, which should loader use.
3. Such a package is separated css package must be introduced before it becomes effective js generated both integrally

//处理模块配置
    module: {
        rules: [{
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
                //用什么下载什么loader 记得下载less模块
        }]
    },

 

Plug:

oader be used to convert certain types of blocks, which plug can be used to perform a wider range of tasks. Range of plug-ins include, from packaging optimization and compression, all the way to redefine the environment variable. Plug-in interface is extremely powerful, it can be used to handle a variety of tasks.

I want to use a plug-in, you only need  require() it, then add it to the  plugins array. Most plug-ins can be customized by option (option). You can also use multiple times because of the different purposes with a plug in a configuration file, then need to use  new to create an instance of operator.

const HtmlWebpackPlugin = require('html-webpack-plugin');
// 通过 npm 安装   用什么引入什么插件 同时npm安装什么  作用是将打包的文件抽离到dist文件夹中
//插件配置
    plugins: [
        new HtmlWebpackPlugin( /*{ template: './src/demo.html' }*/ )
        //必须new这个对象  可以具体配置
    ],

mode:

By selecting  development or  production a being, and to set the  mode parameters, you can enable webpack built under the corresponding pattern optimization

The code is packaged as a compressed version

mode: 'development'
mode: 'production'
//表明打包完的代码的样式  压缩（production）非压缩（development）