Small white brief talk: webpack introduction summary

This is the first day of my participation in the August More Text challenge

When it comes to WebPack, there should be a few questions

1. What is Webpack?

The website says: essentially,webpackIs an application for modern JavaScript applicationsStatic module packaging tool.

2. Why do we need build tools?

Convert es6, ES7 and other new JS syntax
Convert JSX syntax
CSS prefix completion/preprocessor :less, SASS style file parsing
Compression confusion
Image compression
, etc.

3. There are many front-end building tools, such as Grunt, Gulp and recently popular Vite. Why webPack?

Rich community ecology
Flexible configuration and plug-in extension
The official update iteration speed is fast

Now that you’ve chosen WebPack, let’s take a quick look at how to use it

1. The webpack configuration

The default webpack configuration file is webpack.config.js, or you can specify a configuration file by configuring webpack –config
Environment building:
- Creating an empty directory
  - mkdir my-project
  - cd my-project
  - npm init -y
- Install Webpack and WebPack-CLI
- Create the webpack.config.js file

2. Composition and use of Webpack

Entry File Entry

entry: "./src/index.js".// Single entry bit string
entry: { index: "./src/index.js".search: "./src/search.js",},// Multiple entries are writes to object key-value pairs
Copy the code

Output File export

  output: {
    path: path.join(__dirname, "dist"), // Output the dist directory in the same directory as the folder
    filename: "bundle.js".// Single-entry files specify the file name directly
    filename: "[name].js".// Multi-entry files use placeholders to ensure that the file name is unique
  },
Copy the code

Loaders loader

module: {
    rules: [{// Convert es6, ES7 and other JS syntax and new features
        test: /.js$/,
        use: "babel-loader".// Ignore the specified directory and do not parse
        exclude: /node_modules/}, {// Support.cc file loading and parsing
        test: /.css$/.// MiniCssExtractPlugin outputs a separate.css file
        // use array execution order bits from back to front
        use: [MiniCssExtractPlugin.loader, "css-loader"],}, {// Replace less with CSS
        test: /.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"."less-loader",
          {
            // -- CSS rear processor
            loader: "postcss-loader".options: {
              plugins: () = > [
              // Automatically complete the browser prefix
                require("autoprefixer") ({// The proportion of users using the latest two compatible browsers ios7 or later
                  browsers: ["last 2 versions"."1%" >."ios 7"],}),],},}, {// Flexible layout with lib-flexible (dynamically computed root element REM)
            // HTML needs to introduce lib-flexible and be executed first
            loader: "px2rem-loader".options: {
              remUnit: 75.// 1rem=75px
              remPrecision: 8.// px=>rem number of decimal places},},],}, {// Package the image
        test: /.(png|jpg|gif|jpeg)$/,
        use: [ 
          { 
             loader: "url-loader".If the value is smaller than 10K, the base64 format is displayed
             options: { limit: 10240},},],}, {// Wrap fonts
        test: /.(woff|wof2|eot|ttf|otf)$/,
        use: [
          {
            loader: "file-loader".options: {
              name: "[name]_[hash:8][ext]",},},],},Copy the code

The plugin plug-in

  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  plugins: [
    // Output a separate.css file while the Loader module needs to be changed
    new MiniCssExtractPlugin({
      filename: "[name]_[contenthash:8].css".// 
      / / {
      // test: /.css$/,
      // use: [MiniCssExtractPlugin.loader, "css-loader"],
      / / separate output conflict with style - loader. So switch to MiniCssExtractPlugin loader
      // },
      / / {
      // test: /.less$/,
      // use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      // },
    }),
    // Compress the output CSS file
    new OptimizeCss({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require("cssnano"),}),// Compress the output HTML file
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src/search.html"),
      filename: "search.html".// The packaged JS CSS files are automatically injected into HTML
      inject: true.// Which chunk is used for the generated HTML
      chunks: ["search"].minify: {
        html5: true.collapseWhitespace: true.preserveLineBreaks: false.minifyCSS: true.minifyJS: true.removeComments: false,}}),]Copy the code

Model environment Configuration

Hot update

  / / package. Json file
   "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."build": "webpack --config webpack.production.js"."watch": "webpack --watch"."dev": "webpack-dev-server --config webpack.dev.js --open"
  },
  / / webpack. Dev. Js file
  const webpack = require("webpack");
  plugins: [new webpack.HotModuleReplacementPlugin()],
  devServer: {
    contentBase: "./dist".hot: true,},Copy the code

.babel file configuration

{
  "presets": [["@babel/preset-env"]."@babel/preset-react"]."plugins": ["@babel/plugin-syntax-dynamic-import"]}Copy the code

Package. json is installed on demand

{
  "name": "wepack01"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."build": "webpack --config webpack.production.js"."watch": "webpack --watch"."dev": "webpack-dev-server --config webpack.dev.js --open"."build:ssr": "webpack --config webpack.ssr.js"."dll": "webpack --config webpack.dll.js"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "@babel/core": "^ 7.14.6"."@babel/plugin-syntax-dynamic-import": "^ 7.2.0"."@babel/preset-env": "^ 7.14.7"."@babel/preset-react": "^ 7.14.5"."autoprefixer": "^ 9.5.1"."babel-eslint": "^ 10.0.1." "."babel-loader": "^ 8.2.2"."clean-webpack-plugin": "^ 4.0.0 - alpha."."css-loader": "^ 5.2.6." "."cssnano": "^ 4.1.10"."eslint": "^ 5.16.0"."eslint-config-airbnb": "^ 17.1.0"."eslint-loader": "^ 2.1.2"."eslint-plugin-import": "^ 2.23.4"."eslint-plugin-jsx-a11y": "^ 6.4.1." "."eslint-plugin-react": "^ 7.24.0"."eslint-plugin-react-hooks": "^ 4.2.0"."express": "^ 4.17.1"."file-loader": "^ 6.2.0"."friendly-errors-webpack-plugin": "^ 1.7.0"."glob": "^" 7.1.4."happypack": "^ 5.0.1." "."hard-source-webpack-plugin": "^ 0.13.1." "."html-webpack-externals-plugin": "^ 3.8.0." "."html-webpack-plugin": "^ 5.0.0"."less": "^ 4.4.1"."less-loader": "^ 10.0.1." "."mini-css-extract-plugin": "^ 2.1.0." "."optimize-css-assets-webpack-plugin": "^ the 6.0.1." "."postcss-loader": "^ 3.0.0"."process": "^ 0.11.10"."px2rem-loader": "^ 0.1.9"."raw-loader": "^ 0.5.1"."react": "^ 17.0.2"."react-dom": "^ 17.0.2"."speed-measure-webpack-plugin": "^ 1.5.0." "."style-loader": "^ 3.0.0"."terser-webpack-plugin": "^ 5.1.4 ensuring"."thread-loader": "^ 3.0.4"."url-loader": "^ 4.4.1"."webpack": "^ 5.1.3"."webpack-bundle-analyzer": "^ 3.3.2 rainfall distribution on 10-12"."webpack-cli": "^" 3.3.12."webpack-dev-server": "^ 3.11.2"."webpack-stats-plugin": "^ 1.0.3"
  },
  "dependencies": {
    "larger-number": "^ 1.0.0"."lib-flexible": "^" 0.3.2}}Copy the code

Devtool will be revealed in the next step!

Refer to the article on the website

Segmentfault.com/a/119000000…
webpack.docschina.org/concepts/
zhuanlan.zhihu.com/p/65574428

That’s a simple introduction to Webpack,

Small white brief talk: webpack introduction summary

Related Posts

Front-end Knowledge Points to Master (1)

Have you really figured out HTTP? (2)

Hand tear 89K STAR Axios design ideas, and ability enhancement