webpack打包CSS详细流程解析
已收录本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于webpack打包CSS流程的相关问题,下面一起来看一下,希望对大家有帮助。
【相关推荐:javascript视频教程、web前端】 先准备好需要转换的文件,放在src文件夹中,有index.css样式文件和index.js。虽然说是把css也编译打包,也是先将其转换给index.js文件的,index中的文件内容import './index.css' 还有一个模板文件,也就是将打包编译好的文件引入到的index.html文件 初始化就会自动生成webpack.json和node_modules包安装的文件。 再在环境中安装包 识别css文件的安装包 CSS样式以style的方式引入的 CSS样式以link的方式引入 js文件引入到html文件中需要手动,但是使用该插件,可以自动引入到html文件中 需要实例化,在plugins中进行配置 通过命令行 【相关推荐:javascript视频教程、web前端】 以上就是webpack打包CSS详细流程解析的详细内容,更多请关注php中文网其它相关文章!
1,要打包的文件,和引入的模板文件准备
import './index.css'
2,环境搭建
npm init =》项目搭建环境的初始化
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的桥梁
npm install --save-dev css-loader@4.1.1
npm install --save-dev style-loader@1.2.1
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
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
声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除
程序员必备接口测试调试工具:点击使用
声明:本文转载于网络,如有侵犯,请联系545125923@qq.com删除