概述
本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于webpack打包CSS流程的相关问题，下面一起来看一下，希望对大家有帮助。
【相关推荐：javascript视频教程、web前端】
1，要打包的文件，和引入的模板文件准备
先准备好需要转换的文件，放在src文件夹中，有index.css样式文件和index.js。虽然说是把css也编译打包，也是先将其转换给index.js文件的,index中的文件内容import './index.css'
还有一个模板文件，也就是将打包编译好的文件引入到的index.html文件
import './index.css'
登录后复制2，环境搭建
npm init =》项目搭建环境的初始化
初始化就会自动生成webpack.json和node_modules包安装的文件。
再在环境中安装包
1）基本的webpack包的安装
npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1
登录后复制2）将模块化编译打包的文件自动引入模板文件，也就是html文件
npm install --save-dev html-webpack-plugin@4.3.0
登录后复制3）桥梁文件loder-css和webpack的桥梁
识别css文件的安装包
npm install --save-dev css-loader@4.1.1
登录后复制CSS样式以style的方式引入的
npm install --save-dev style-loader@1.2.1
登录后复制CSS样式以link的方式引入
npm install --save-dev mini-css-extract-plugin@0.9.0
登录后复制最后安装的包，可以从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，对环境进行配置
plugins
HtmlWebpackPlugin
js文件引入到html文件中需要手动，但是使用该插件，可以自动引入到html文件中
需要实例化，在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']
})
]登录后复制环境进行配置 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，运行
通过命令行
npm run webpeck
登录后复制【相关推荐：javascript视频教程、web前端】
以上就是webpack打包CSS详细流程解析的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是高大电话为你收集整理的webpack打包CSS详细流程解析的全部内容，希望文章能够帮你解决webpack打包CSS详细流程解析所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复