Frequently asked Questions

1. Why is the front end packaged and built?

There are two ways to answer the question: write code and produce code

  • Smaller (tree-shaking, compression, merging) and faster to load
  • Compile high-level languages and syntax (TS, ES6+, modularity, SCSS), reduce mistakes in the development process, improve development efficiency
  • Compatibility and error checking (Polyfill, PostCSS, ESLint),
  • Unified and efficient development environment
  • Unified build process and output standards
  • Integrated company construction specification (test, launch, etc.)

2. What are common Loaders and plugins?

Loader: babel-loader, CSS-loader, postCSs-loader, style-loader, url-loader plugin: HtmlWebpackPlugin, CleanWebpackPlugin, DefinePlugin, MiniCssExtractPlugin, IgnorePlugin, HappyPack, ParallelUglifyPlugin

The loader and Plugin configuration files are as follows:

loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: "Babel - loader? Optional = runtime&cacheDirectory"}, / / direct import picture url {test: / \. (PNG | JPG | jpeg | GIF) $/, use: 'file - loader'}, / / {/ / test: / \. CSS $/, / / / / loader execution order is: from the back/forward/loader: ['style-loader', 'css-loader'] //}, {test: /\. CSS $/, // loader is executed in the following order: ['style-loader', 'css-loader', 'postcss-loader'] // add postcss}, {test: /\. Less $/, // add 'less-loader', pay attention to the sequence: ['style-loader', 'css-loader', 'less-loader'] }, { test: /\.(png|jpg|jpeg|gif)$/, use: { loader: 'url-loader', options: {// outputPath () {// outputPath () {// outputPath () {// outputPath () {// outputPath () {// outputPath () {// outputPath (); '/img1/', // set the CDN address of the image (can also be set in the external output, that will apply to all static resources) // publicPath: 'http://cdn.abc.com'}}},] plugins: [ // new HtmlWebpackPlugin({ // template: path.join(srcPath, 'index.html'), // filename: HTML new HtmlWebpackPlugin({template: path.join(srcPath, 'index.html'), filename: 'index.html', // chunks indicates which chunks the page will refer to (i.e., index and other above). By default, chunks are referred to all: ['index', 'vendor', 'common'] // Consider code split}), // multiple entry - generate other.html new HtmlWebpackPlugin({template: path.join(srcPath, 'other.html'), filename: 'other.html', chunks: ['other', 'vendor', 'common'] // Consider code splitting}), new CleanWebpackPlugin(), New webpack.defineplugin ({// window.env = 'production' ENV: Json.stringify ('production')}), // Extract CSS file new MiniCssExtractPlugin({filename: 'CSS /main.[contentHash:8].css'}), // ignore the /locale directory in the moment new webpack.ignoreplugin (/\.\/locale/, /moment/), New happyPack ({// use a unique identifier id to indicate that the current happyPack is used to handle a specific class of file ids: 'Babel ', // how to handle.js file, use same as loaders in Loader configuration: ['babel-loader?cacheDirectory'] }), New ParallelUglifyPlugin({// UglifyJS parameters passed to // UglifyJS) UglifyJS: {output: {beautify: false, // The most compact output comments: false, // remove all comments}, compress: Collapse_vars {// Delete all 'console' statements, compatible with IE drop_console: true, // The inline variable collapse_vars is defined only once: True, // Extract static values that occur multiple times but are not defined as variable references reduce_vars: true,}}})]Copy the code