Basic configuration and some understanding of webpack

Recently spent two weeks of rest time to learn webpack, can write their own project required configuration files, overall webpack is a very good front-end modular packaging tools, it is worth taking the time to study learning.

What is Webpack, and what is its appearance in order to solve the problem?

Webpack is a platform that can fuse a variety of front-end technologies, and we simply have to configure the new front-end syntax such as JSX and typescript, thanks to the development of the community, when I first contacted Webpack in 17, it was all English documents, Now there are a lot of excellent Chinese introductory tutorials and engineering practices

We started to configure our Webpack.config.js

The main API

1,Enrty (project entrance)　　

string, such as entry: "./src/index.js"

Array form: Like Entry:[react, React-dom], you can package multiple files in an array into a chunk

Object form, if you need to configure a multi-page application, or if we pull out of the specified module as the specified public code, this form is required, and the property name is the value of the placeholder [name]

Such as:

entry: {main:'./src/index2.js './src/index2.js ', vendor:[' react ', ' React-dom ']} 

2.output (export documents)

tells Webpack where to export the created bundle.js and how to name it

'./dist '' js/[name].chunk.js ', publicpath:'/dist/' }

3,module (processing of modules)

Webpack can only handle JS files, the browser may not recognize some of the latest JS syntax, so we have to do some preprocessing of the incoming module, which involves the webpack of another core concept "loader"

The role and basic usage of loader

Webpack, Loader's configuration is mainly performed in Module.rules, which is an array, and each rule does two things

• Identify the file type to determine the loader (Rule.test attribute) that specifically processes the data
• Work with related loader to convert files (Rule.use property)

For example, we want to deal with JSX syntax in react.

/(\.jsx|\.js)/,  // indicates a matching rule, is a regular expression use:{   //  　　　　　　Represents the loader"Babel-loader" that will be used for matching files, options: {presets: ["es2015", "React"] }}}]}

Common loader:

Conversion compilation: Script-loader, Babel-loader,ts-loader,coffee-loader

Processing style: Style-loader,css-loader,less-loader,sass-loader,postcss-loader

Processing files: Raw--loader,url-loader,file-loader

Processing data: Csv-loader,xml-loader

Processing Template language: Html-loader,pug-loader,jade-loader,markdown-loader

Cleaning and testing: mocha-loader,eslint-loader

In addition, there are many loader that can be queried in the loader documentation

4,plugin (loader can not do the processing will be given to plugin to do)

Const CLEANWEBPACKPLUGIN = require ("Clean-webpack-plugin") {... plugin:[  new  webpack. Defineplugin ({ "process.env" : {NODE_ENV:JSON.stringify ("Production")}}), New cleanwebpackplugin (["JS"+ "/stu/"truefalse  } )]}

A plug-in is a function, through the introduction of different parameters, you can achieve different functions, webpack people find it difficult to learn one of the places is yo ah self-encapsulation plugins, for most of us, need to master the plugins is not so much, when using the time to check can

5, some ancillary development of related properties

Devtool: There is a big difference between the packaged code and the original code, which controls whether it is generated and how it is generated Sourcemap

Devserver: By configuring the Devserver option, you can turn on a local server

Watch: When watch mode is enabled, Webpack will continuously listen for changes to the file that has been parsed, and development is easy to open

Watchoption: Options for customizing watch mode

Performance: How the command line displays performance tips after packaging, if a warning or an error exceeds a certain size

　　

For webpack configuration, differentiate the development environment or the production environment

Here are the recommendations for the documentation

We should extract the public code to avoid duplication

So there are usually so many files

Webpack.config.js

Webpacl.dev.js

Webpack.prod.js

Webpack.common.js

There are also files that are individually configured Babel Babelrc,webpack can be automatically identified

If you want to follow the configuration of a webpack.config.js file, you can refer to the entry Webpack, see this article is enough

There are also documents to take a closer look at webpack Chinese documents

Basic configuration and some understanding of webpack