Talk webpack 4

Foreword

hello, little friends herein, this warehouse out as for my GitHub repository web-study, if you think you have help, then welcome to star, your point is I praise continually updated power

web-study

webpack Strapping Tools

webpackThere is no doubt now is very hot front-end automated packaging tools, this tutorial series is based on the latest version webpack 4.X.Xto write.

webpack 4: Zero Configuration start

1. Create a directory and then enter, generate initialization package.jsonfile

md webpack-4-quickstart

cd webpack-4-quickstart

npm init -y

1. Installation webpack4andwebpack-cli

npm install webpack webpack-cli --save-dev

1. Open the package.jsonAdd build script:

"scripts": {
  "build": "webpack"
}

1. Creating entry file: index.js, webpack4the default entry for the file/src/index.js

console.log('hello world!')

1. Construction of packing

npm run build

You will ~/webpack-4-quickstart/dist/main.jsget the file after you pack.

Webpack 4: production and development model

Create a webpack.config.js webpackprofile, webpack 4describes the production production( ) and development development( ) modes, need to modeattribute.

In the webpack.config.jsspecified file modeattribute development, packaged file again. ( npm run build).

You can see the main.jscode in the file is not compressed, ha ha, this is webpacka powerful place, it can be divided into model development.

webpack 4: override the default inlet / outlet document

In webpack.config.jsby file entryspecified property entry file is packaged, outputthe attribute specifies the export file package.

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/hello.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // 这里必须指定一个绝对路径
    filename: 'hello.js'
  }
}

Packing again, it will pack ./src/hello.jsoutput ./dist/hello.js.

webpack 4: js code translation with Babel ES6 7

Now we are accustomed to using Javascript to write ES6.

But not all browsers know how to deal ES6. We need to do some conversions.

This step is called conversion transpiling. transpilingIt refers to the ES6 translated source browser recognizes.

webpack itself does not know how to convert, but there is loaders. They imagine the converter.

babel-loader Is a loader webpack, you can put the code translated into more than ES6 ES5.

In order to use this loader we need to install a series of dependency. especially:

• babel-core
• babel-loader
• babel-preset-env （for compiling Javascript ES6 code down to ES5）

Safety first, right:

npm i babel-core babel-loader babel-preset-env --save-dev

Next we create a directory in the project .babelrcfile is used to configure Babel.

{
  "presets": ["env"]
}

Once configured using a configuration file babel-loader

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

webpack 4: HTML plug-in

webpackIt requires two additional components to deal with HTML: html-webpack-pluginand html-loader.

Install:

npm i html-webpack-plugin html-loader --save-dev

webpack configuration html-loader

{
  test: /\.html$/,
  use: [
    {
      loader: 'html-loader',
      options: { minimize: true } // 是否压缩代码
    }
  ]
}

... 插件使用...
plugins: [
  new HtmlWebPackPlugin({
    template: './src/index.html',
    filename: './index.html'
  })
]

In ./src/index.htmla new HTML file (template file, used to webpackpack)

The last run npm run buildrepackaging, see ./dist directory, you will see the results after the operation.

No need to introduce your JavaScript in your HTML file: it automatically injected into it.

Open ./dist/index.html in the browser: you can see the final result.

webpack 4: to extract the CSS file

mini-css-extract-plugin Plug-in to extract the CSS file.

Install it:

npm i mini-css-extract-plugin css-loader --save-dev

Then create a CSS file to test:

body {
  line-height: 2;
}

Loader configuration and plugin:

{
  test: /\.css$/,
  use: [MiniCssExtractPlugin.loader, 'css-loader']
}

...插件使用...
new MiniCssExtractPlugin({
  filename: '[name].css',
  chunkFilename: '[id].css'
})

Finally, at the entrance of the introduction of CSS file:

import style from './main.css'

Construct:

npm run build

View the ./distcatalog, you should be able to see the results of CSS!

RECAP: extract-text-webpack-pluginIn webpack 4 can not be used. Please use mini-css-extract-plugin.

webpack 4：webpack dev server

Once you have configured webpack dev serverit will load your app in the browser.

As long as you change the file, it will automatically refresh the browser page.

The installation package to the following structures webpack dev server:

npm i webpack-dev-server --save-dev

Then turn package.jsonadjust the script:

"scripts": {
  "dev": "webpack-dev-server --mode development --open",
  "build": "webpack --mode production"
}

Save and close.

Now run:

npm run dev

You will see webpack dev server to load your application in a browser.

webpack dev server is very suitable for development.