When I first came into contact with Webpack 3.X, with the development of front-end technology, it has long been changed. In the era of static page development, we built an HTML file, introduced JS, CSS, opened the web page, you can see the effect. In addition, WebPack also does a series of optimized functions such as code compression obfuscating, common code extraction, autoprefixer, hot update and so on. It can be seen that in the current development trend, it is very important for the front end to master the configuration of WebPack. Today we will talk about WebPack4.x.

Installation:

1.npm install webpack webpack-cli -g

Webpack-cli is a command line tool that uses Webpack. It is no longer a dependency of Webpack after 4.x. We need to install this tool separately.

2.npm install webpack -D

Used as a dependency in a project.

Experiment:

Add build command to package.json scripts:

 "scripts": {
    "build": "webpack --mode production"
  }
Copy the code

Create SRC /index.js, write any js and run NPM run build on console.

The first dist folder will appear in the directory. Open the main.js file inside, which has been confused and compressed.

Key Concepts:

1. Entry Entry file.

module.exports = {
    entry: './src/index.js' 
}

// The above configuration is equivalent to
module.exports = {
      entry: {
        main: './src/index.js'}}// Or configure multiple entries
module.exports = {
      entry: {
        foo: './src/page-foo.js'.bar: './src/page-bar.js'.// ...}}Copy the code

2. Loader file converters, such as ES6 to ES5 and SCSS to CSS.

module: {
  // ...
  rules: [
    {
      test: /\.jsx? /.// A regular expression that matches the file path. Usually we match the file type suffix
      include: [
        path.resolve(__dirname, 'src') // Specify which path files need to be processed by loader].use: 'babel-loader'.// Specify the loader to use},]}...Copy the code

3. The plugin plugin can be understood as the code conversion work is handed over to loader, and the packaging and building work is handed over to plugin.

const UglifyPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyPlugin()
  ],
}
Copy the code

4. Output, output file

module.exports = {
  // ...
  output: {
    // Output directory
    path: path.resolve(__dirname, 'dist'),
    // Output the file name
    filename: 'bundle.js',}}// Or multiple entries generate different files
module.exports = {
  entry: {
    foo: './src/foo.js'.bar: './src/bar.js',},output: {
    filename: '[name].js'.// The output file name is the corresponding key (foo, bar).
    path: __dirname + '/dist',}}// Hash is used in the path, with a different hash value for each build, to avoid online browser caching for new releases
module.exports = {
  // ...
  output: {
    filename: '[name].js'.// If the file is not changed, the hash will not change
    path: __dirname + '/dist/[hash]',}}...Copy the code

Webpack configuration:

One of the core features of Webpack 4.x is the 0 configuration, all of which can be implemented using package.json as follows:

"scripts": {
  "scripts": {
  "dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js"."build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"}}Copy the code

But this kind of online joke voice is more, and many actual needs of the function or do not support, or do not know how to write, or build wepack.config.js, practical step by step!

Put the above pieces together and you have a simple WebPack configuration:

const path = require('path')
// Compress obfuscated code
const UglifyPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './src/index.js'.output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',},module: {
    rules: [{test: /\.jsx? /.include: [
          path.resolve(__dirname, 'src')].use: 'babel-loader',}]},// Code module path resolution configuration
  resolve: {
   //resolve.modules configures the directory in which Webpack finds third-party modules
    modules: [
      "node_modules",
      path.resolve(__dirname, 'src')]./** * When an import statement does not have a file suffix, * Webpack automatically adds a suffix to try to access the file. The *resolve.extensions are used to configure the list of suffixes used during the attempt, * looking down. * /
    //
    extensions: [".wasm".".mjs".".js".".json".".jsx"],},plugins: [
    new UglifyPlugin()
  ],
}...
Copy the code

With the webpack.config.js console, type webpack to run.

The above is just a simple webpack.config.js configuration, but it seems to be completely useless 😂!

Here is a configuration that can meet the front-end requirementswebpack.config.js :

Front-end packaging generally needs to achieve:

• Build the HTML, CSS, JS files we need to publish
• Using CSS (SASS, LESS)
• Process and compress images
• Use Babel ES6 – ES5
• Local service

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: './src/index.js'.output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',},module: {
    rules: [{test: /\.jsx? /.include: [
          path.resolve(__dirname, 'src')],use: 'babel-loader'}, {test: /\.less$/.// Since this plug-in needs to interfere with the contents of the module transformation, its corresponding loader needs to be used
        use: ExtractTextPlugin.extract({ 
          fallback: 'style-loader'.use: [
            'css-loader'.'less-loader',],}),}, {test: /\.(png|jpg|gif)$/.use: [{loader: 'file-loader'},],},],},// Code module path resolution configuration
  resolve: {
    modules: [
      "node_modules",
      path.resolve(__dirname, 'src')],extensions: [ ".js".".json".".jsx"],},plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html'.// Configure the output file name and path
      template: 'src/index.html'.// Configuration file template
    }),
    new ExtractTextPlugin('[name].css'),],}Copy the code

To be continued…

Reference Documents:

Resolve configuration for Webpack