所属分类：web前端开发
前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
【相关推荐：javascript视频教程、web前端】
先准备好需要转换的文件，放在src文件夹中，有index.css样式文件和index.js。虽然说是把css也编译打包，也是先将其转换给index.js文件的,index中的文件内容import './index.css'
还有一个模板文件，也就是将打包编译好的文件引入到的index.html文件
微博登录
QQ登录import './index.css'
登录后复制初始化就会自动生成webpack.json和node_modules包安装的文件。
再在环境中安装包
npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1
登录后复制npm install --save-dev html-webpack-plugin@4.3.0
登录后复制识别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
登录后复制{
"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"
}
}登录后复制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']
})
]登录后复制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
登录后复制【相关推荐：javascript视频教程、web前端】
以上就是webpack打包CSS详细流程解析的详细内容，更多请关注zzsucai.com其它相关文章！
