Webpack packaged CSS detailed process analysis

This article brings you relevant knowledge about javascript, which mainly introduces related issues about the webpack packaging CSS process. Let’s take a look at it together. I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, web front-end]

1, the file to be packaged , and the imported template file preparation

First prepare the files that need to be converted and place them in the src folder, including the index.css style file and index.js. Although the css is also compiled and packaged, it is first converted to the index.js file. The file content in the index import './index.css'

There is also a template file, which is to package it. The compiled file is imported into the index.html file

##

import './index.css'

2, environment setup

npm init =》Initialization of the project construction environment

Initialization will automatically generate webpack.json and node_modules package installation files.

Then install the package in the environment

1) Installation of basic webpack package

npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1

2) Modular compilation and packaging The file automatically introduces the template file, which is the html file

npm install --save-dev html-webpack-plugin@4.3.0

3) Bridge file loder-css and webpack bridge

Identifies the installation package of css files

npm install --save-dev css-loader@4.1.1

CSS style is introduced in the form of style

npm install --save-dev style-loader@1.2.1

CSS style is introduced in the form of link

npm install --save-dev mini-css-extract-plugin@0.9.0

The last installed package can be viewed from package.json

{
  "name": "webpack-css",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.1.1",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

3, configure the environment

plugins

##HtmlWebpackPluginJS files need to be introduced into html files manually, but using this plug-in, they can be automatically introduced into html files

Need to be instantiated and configured in plugins

 const HtmlWebpackPlugin = require('html-webpack-plugin');
 plugins: [
    // 自动将依赖注入 html 模板，并输出最终的 html 文件到目标文件夹
    new HtmlWebpackPlugin({
      //在dist文件下成为打包生成的文件
      filename: 'index.html',
      //源文件，一起作为模板
      template: './src/index.art',
      //要引入的文件，在entry里面的js文件的名称
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      filename: 'list.html',
      template: './src/list.art',
      chunks: ['list']
    })
  ]

environment Configure webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//css用link的方式引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // loader: 'css-loader'
        // use: ['style-loader', 'css-loader']
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [ 
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ]
};

4, run

through the command line

npm run webpeck

[Related recommendations:

javascript video tutorial

, web front end】

The above is the detailed content of Webpack packaged CSS detailed process analysis. For more information, please follow other related articles on the PHP Chinese website!