Home > Article > Web Front-end > 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]
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 install --save-dev webpack-cli@3.3.12 webpack@4.44.1
npm install --save-dev html-webpack-plugin@4.3.0
npm install --save-dev css-loader@4.1.1CSS style is introduced in the form of style
npm install --save-dev style-loader@1.2.1CSS style is introduced in the form of link
npm install --save-dev mini-css-extract-plugin@0.9.0The 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" } }
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' }) ] };
npm run webpeck
[Related recommendations:
javascript video tutorialThe 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!