标签:
在打包css之前,需要知道module有什么作用,还有loader。
module 主要是用来配置不同的加载器,而加载器是用于不同的文件。
loader 主要用于将不同的文件都转换成js文件,如css,ES6等。
所有的Loaders都需要在npm中单独进行安装,并在webpack.config.js里进行配置。
test:匹配处理文件的扩展名的正则表达式
use:loader名称,就是你要使用模块的名称
include/exclude:手动指定必须处理的文件夹或屏蔽不需要处理的文件夹
query:为loaders提供额外的设置选项
打包css文件
建立index.css文件
src/css/index.css
body{
background-color: red;
color: white;
}
CSS文件建立好后,需要引入到入口文件中,才可以打包到,这里我们引入到entry.js中。
/src/entery.js中在首行加入代码:
import './css/index.css';
配置loader
解析css的loader需要style-loader和css-loader
npm install style-loader css-loader --save-dev
style-loader:用于处理css中url等
css-loader: 用于将css插入到页面的style标签
module属性中的配置
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader'],
include: path.join(__dirname,'./src'),
exclude: /node_modules/
}
]
}
注意顺序很重要,即先用style-loader解析,然用css-loader添加到style标签中
配置js压缩
js压缩就需要用到plugins
webpack4.x的production模式默认压缩,不需要配置。
其他版本
webpack默认集成uglifyjs-webpack-plugin,所以只需要引入就好了。
const uglify = require('uglifyjs-webpack-plugin');
在插件配置中添加
plugins:[
new uglify()
],
只能在生产环境中使用,开发环境会报错
自动发布html
前面的index.html是手动添加,需要自动生成,添加资源。
npm install --save-dev html-webpack-plugin
在配置文件中
const htmlPlugin= require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 指定产出的模板
filename: 'base.html', // 产出的文件名
chunks: ['entry1','entry2'], // 在产出的HTML文件里引入哪些代码块
hash: true, // 名称是否哈希值
title: 'base', // 可以给模板设置变量名,在html模板中调用 htmlWebpackPlugin.options.title 可以使用
minify: { // 对html文件进行压缩
removeAttributeQuotes: true // 移除双引号
}
})
]
标签:
来源: https://www.cnblogs.com/jadedoo/p/10188026.html