Installation and use of Webpack

webpack common installation command

webpack install and delete commands:

npm / cnpm install webpack -g (Global Installation)
NPM / CNPM Uninstall WebPACK -g (Global unloading)
NPM / CNPM the install WebPACK -s (partial installation)
NPM / CNPM Uninstall WebPACK -s (partial unloading)

When installing, plus the '--save' written in the mounted configuration dependencies of package.json, add '--save-dev' or '-D' will be written on mounted inside devDependencies disposed.

Installation webpack-cli

npm / cnpm install --save-dev webpack-cli -s // partial installation (webpack 4.0 must be installed)

Quickly create package.json file

asl / init s cnpm

Mounting style-loader, css-loader

css-loader is responsible for parsing css js file into a string, style-loader is responsible for parsing the string into a page style tags
npm / cnpm i style-loader css -loader -D

Installation post-loader, autoprefixer

To add a prefix for automatically detecting css style attribute
npm / cnpm i post-loader autoprefixer -D

Install file-loader, url-loader

Two loader to load images, fonts and other files, url-loader is based on the file-loader to write a loader, use the url-loader, you must install file-loader
two loader written in webpack.config.js basic configuration same, url-loader than a file-loader multi limit attribute, used to set the file compiled into a document size range base64 code
npm / cnpm i file-loader url -loader -D

Less-loader is mounted or sass-loader and babel-loader

less-loader sass-loader, and are pre-programmed and less sass the language used to compile the css
babel-loader for ES6 translates the ES5
NPM / I less-loader CNPM -D
NPM / CNPM I @ Babel babel-loader / core @ babel / preset-env -D // babel need to install 3

Installation webpack-dev-server

Installation command: // reason to install local webpack and webpack-cli is because the startup webpack-dev-server requires two auxiliary
cnpm i webpack webpack-cli webpack- dev-server

webpack-dev-server command need to look through webpack-cli, so this command must be configured in package.json, find webpack-cli when parsing the command package.json to
use hot update webpack-dev-server, in the development environment each time you change the code, compile it automatically generates a new cache file (the output file will not only exist in the cache, the default path exist directly under the root directory, for example: boundle.js, the real output files packaged in packaging folder in dest dest / boundle.js), the browser will use the cached files, so as to achieve the effect of heat update.

So it is necessary to prepare two sets of configuration files, one for the development environment for a production environment
each time you change the configuration file, restarting webpack-dev-server, because package.json file is read at startup.

动态配置
webpack.config.js

//静态
module.exports={

};

//动态
module.exports=function (env, argv){
  return {
    //共用
    entry: '...',
    ...

    //独立
    ...env.production?require('./config/webpack.production'):require('./config.webpack.development')
  }
};

Installation html-webpack-plugin

HTML is used to operate in a plugin, the output HTML, arranged in webpack.config.js follows:

const HtmlWebpackPlugin = require('html-webpack-plugin');
{
  ...,
  plugins: [
    new HtmlWebpackPlugin({
      template: 'html文件模板路径'
    })
  ]
}

Code style detection eslint

You need to install: eslint, eslint-loader, a unified coding style
npm / CNPM eslint eslint -D-Loader
Script package.json files, configuration "eslint_init": "eslint --init"
run the command: npm / cnpm run generating a code style eslint_init .eslintrc.js on demand detection rule configuration file

Code means testing tool dest

需要安装it is a WebPack-
cnpm and is -D-WebPack

package.json configure command: "test": "jest- webpack"
Using this tool need to write test cases (test cases are running in node environment):
Create a test folder used to store test cases, test cases generally js framework as follows:

const mod=require('../src/js/num');   //引入被测试的文件

test('test sum', ()=>{  //测试集 suite
  expect(mod.sum(12, 5)).toBe(17);  //测试项
  expect(mod.sum(1, 1)).toBe(2);
  expect(mod.sum(0, 0)).toBe(0);
});

webpack.config.js file configuration

1.mode:
none not optimize
development debugging information provided process.env.NODE_ENV
Production maximum
2.entry: Entrance
single entry --SPA
multiple inlet --MPA
3.output: Output
{
path: the path - the absolute path must be path.resolve
filename: filename
}

webpack.config.js static configuration

webpack.config.js dynamic configuration

Depending on the operating environment for different configurations, the configuration of the different operating environments to establish a single configuration file, and then to introduce different operating profiles determined by environmental webpack.config.js file, the following example,
WebPACK inlet configuration file: