Creating a Configuration file

1. Create a file

Create webpack.config.js as SRC

2. The configuration is as follows

const { resolve } = require('path'); // Node has built-in core modules to handle path problems.
Copy the code

module.exports = {
/ / webpack configuration
entry: './src/js/index.js'.// Import file
// Output configuration
output: {
// Output file name
filename: './built.js'.// Output path
// __dirname nodejs variable, representing the absolute directory path of the current file
path: resolve(__dirname, 'build/js') // Output file path configuration
},
/ / a loader configuration
module: {
rules: []// Detailed loader configuration
}
/ / plugins configuration
plugins: [] // Detailed plugins configuration
mode: 'development' // Development environment
//mode: 'production
};
Copy the code

Package style resources

1. Create a file

2. Download the loader package

npm i css-loader style-loader less-loader less -D

3. Modify the configuration file

/* Webpack.config. js The webpack configuration file is used to tell WebPack what to do (when you run the WebPack directive, the configuration is loaded). All build tools run on the NodeJS platform. * /

// resolve to concatenate the absolute path
const { resolve } = require('path')

module.exports = {
  / / webpack configuration
  // Entry point
  entry: './src/index.js'./ / output
  output: {
    // Output file name
    filename: 'build.js'.// Output path
    // __dirname nodejs variable, representing the absolute directory path of the current file
    path: resolve(__dirname, 'build')},/ / a loader configuration
  module: {
    rules: [
      // Detailed loader configuration
      // Different files must be configured for different loaders
      {
        // Which files to match
        test: /\.css$/.// Which loaders to use for processing
        use: [
          // Loaders are executed from right to left and from bottom to top (csS-loader is executed first)
          // Create a style tag, insert the style resource from js, and add it to the head
          'style-loader'.// Load the CSS file into the commonJS module, which contains the style string
          'css-loader'] {},test: /\.less$/,
        use: [
          'style-loader'.'css-loader'.// Compile less files into CSS files
          // You need to download less-loader and less
          'less-loader']]}},// Configure plugin
  plugins: [
    // Specify the plugin configuration]./ / mode
  mode: 'development'.// Development mode
  // mode: 'production',
}

Copy the code

4. Running instruction:

webpack

Packaging HTML resources

1. Create a file

2. Download and install the Plugin package

npm install –save-dev html-webpack-plugin

3. Modify the configuration file

/* Loader: 1. Download 2. Download 2. introduce 3. use */
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); / / reference the plugin

module.exports = {
  entry: './src/index.js'.output: {
    filename: 'build.js'.path: resolve(__dirname, 'build')},module: {
    // Loader configuration
    rules: []},plugins: [
    // Configure plugin
    // html-webpack-plugin
    // Function: An empty HTML file is created by default, and all resources (JS/CSS) are automatically imported.
    // HTML files that need structure can be added with a template
    new HtmlWebpackPlugin({
      // Copy the./ SRC /index.html file and automatically import all the resources (JS/CSS) packaged for output.
      template: './src/index.html'})].mode: 'development'
}
Copy the code

4. Running instruction:

webpack

Package image resources

1. Create a file

2. Download the loader package

npm install –save-dev html-loader url-loader file-loader

3. Modify the configuration file

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js'.output: {
filename: 'built.js'.path: resolve(__dirname, 'build')},module: {
rules: [{test: /\.less$/.// Multiple loaders should be used to process the use
use: ['style-loader'.'css-loader'.'less-loader'] {},Img images in HTML cannot be processed by default
// Processing image resources
test: /\.(jpg|png|gif)$/.// Use a loader
// Download url-loader file-loader
loader: 'url-loader'.options: {
// If the image size is less than 8KB, it will be processed by base64
// Advantage: reduced number of requests (reduces server pressure)
// Disadvantages: larger image size (slower file request speed)
limit: 8 * 1024.// Problem: because URl-Loader uses ES6 modular parsing by default, while HTml-Loader imports commonJS images
// Error in parsing: [object Module]
// Solution: turn off the ES6 modularization of URl-Loader and use commonJS parsing
esModule: false.// Rename the image
// [hash:10] Takes the first 10 bits of the hash of the image
// [ext] Get the original file extension
name: '[hash:10].[ext]'}}, {test: /\.html$/.// Process the img image of the HTML file (responsible for importing img, which can be processed by the URl-Loader)
loader: 'html-loader'}},plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'})].mode: 'development'
};
Copy the code

4. Running instruction:

webpack

Package other resources

1. Create a file

2. Modify the configuration file

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js'.output: {
filename: 'built.js'.path: resolve(__dirname, 'build')},module: {
rules: [{test: /\.css$/,
use: ['style-loader'.'css-loader']},// Package other resources (other than HTML /js/ CSS resources)
{
// Exclude CSS /js/ HTML resources
exclude: /\.(css|js|html|less)$/,
loader: 'file-loader'.options: {
name: '[hash:10].[ext]'}}},plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'})].mode: 'development'
};


Copy the code

3. Running instruction:

webpack

devserver

1. Create a file

2. Download dependencies

npm install webpack-dev-server -D

3. Modify the configuration file

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js'.output: {
filename: 'built.js'.path: resolve(__dirname, 'build')},module: {
rules: [{test: /\.css$/,
use: ['style-loader'.'css-loader']},// Package other resources (other than HTML /js/ CSS resources)
{
// Exclude CSS /js/ HTML resources
exclude: /\.(css|js|html|less)$/,
loader: 'file-loader'.options: {
name: '[hash:10].[ext]'}}},plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'})].mode: 'development'.devServer: {
// The post-build path of the project
contentBase: resolve(__dirname, 'build'),
// Start gzip compression
compress: true./ / the port number
port: 3000.// Open the browser automatically
open: true}};Copy the code

4. Running instruction:

npx webpack-dev-server

Development Environment Configuration

1. Create a file

2. Modify the configuration file

NPX webpack-dev-server will only compile and package in memory, no output */
/* Loader: 1. Download 2. Download 2. introduce 3. use */

// resolve to concatenate the absolute path
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') / / reference the plugin

module.exports = {
  / / webpack configuration
  entry: './src/js/index.js'.// Entry point
  output: {
    / / output
    // Output file name
    filename: 'js/build.js'.// __dirName is a variable in nodejs, representing the absolute directory path of the current file
    path: resolve(__dirname, 'build'), // The output path to which all resource packages will be printed
  },
  / / a loader configuration
  module: {
    rules: [
      // Detailed loader configuration
      // Different files must be configured for different loaders
      {
        // Which files to match
        test: /\.less$/.// Which loaders to use for processing
        use: [
          // Loaders are executed from right to left and from bottom to top (csS-loader is executed first)
          // loader-style: create a style tag, insert the style resource in js, and add it to the head for effect
          'style-loader'.// css-loader: load the CSS file into js as a commonJS module, containing style strings
          'css-loader'.// less-loader: to compile the less file into the CSS file, you need to download the less-loader and less
          'less-loader'],}, {test: /\.css$/,
        use: ['style-loader'.'css-loader'],}, {// Url-loader: handles image resources, problem: the default does not handle IMG images in HTML
        test: /\.(jpg|png|gif)$/.// You need to download url-loader file-loader
        loader: 'url-loader'.options: {
          // If the image size is less than 8KB, it will be processed by base64. Advantages: it will reduce the number of requests (less pressure on the server), disadvantages: it will be larger (file request speed is slower).
          // Base64 is decodes locally on the client, so it reduces server pressure. If the image is too large, using base64 encoding will cause CPU call rate to increase and the page loading time will change
          limit: 8 * 1024.// Rename the image, [hash:10] : get the first 10 bits of the hash of the image, [ext] : get the original extension of the file
          name: '[hash:10].[ext]'.[object Module] [object Module] [object Module] [Object Module] [Object Module] [Object Module]
          // Solution: turn off the ES6 modularization of URl-Loader and use commonJS parsing
          esModule: false.outputPath: 'imgs',}}, {test: /\.html$/.// Process the img image of the HTML file (responsible for importing img, which can be processed by the URl-Loader)
        loader: 'html-loader',},// Package other resources (other than HTML /js/ CSS resources)
      {
        / / | | js | CSS rule out HTML less | JPG | PNG | GIF files
        exclude: /\.(html|js|css|less|jpg|png|gif)/.// file-loader: processes other files
        loader: 'file-loader'.options: {
          name: '[hash:10].[ext]'.outputPath: 'media',},},],},// Configure plugin
  plugins: [
    // html-webpack-plugin: The default is to create an empty HTML file and automatically import all the resources (JS/CSS) packaged for output.
    // HTML files that need structure can be added with a template
    new HtmlWebpackPlugin({
      // Copy the./ SRC /index.html file and automatically import all the resources (JS/CSS) packaged for output.
      template: './src/index.html',})],/ / mode
  mode: 'development'.// Development mode
  // devServer: for automation, you don't have to re-enter webPack every time you change it (automatic compilation, automatic browser opening, automatic browser refreshing)
  // Features: The build package will only be compiled in memory, and there will be no output.
  // Start devServer with the NPX webpack-dev-server directive
  devServer: {
    // The post-build path of the project
    contentBase: resolve(__dirname, 'build'),
    // Start gzip compression
    compress: true./ / the port number
    port: 3000.// Open the browser automatically
    open: true,}}Copy the code

3. Running instruction:

npx webpack-dev-server