构建webpac时 先 npm install 然后 要引入 webpack webpack-cli
css-loader 3版本后
发现 localIdentName要写在modules里 并且不用写modules:true 也可以开启css modules
modules: {localIdentName: '[path]-[name]-[hash:base64:5]' }
如：{
test: /.(styl|stylus)$/,
use: ExtractPlugin.extract({
fallback: 'vue-style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[path]-[name]-[hash:base64:5]' //类名
}
}
},
'postcss-loader',
'stylus-loader'
]
})
},
babel-loader 8 以上要使用 @babel/core （.js .jsx ... 要使用babel-loader 转换 ）
使用postcss-loader 插件 --后处理css css编译完成后（stylus -> css） 通过autoprefixer优化-->css属性加前缀（兼容浏览器）
可以在外面加上postcss.config.js文件来配置
const autoprefixer = require('autoprefixer')
module.exports = {
plugins: [
autoprefixer()
]
}
在vue项目中 样式的代码需要经过vue-style-loader的转换
处理图片 需要引入url-loader 和 file-loader
用法
{
test: /.(gif|jpg|jpeg|png|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 1024,
name: 'resources/[path][name].[hash:8].[ext]'
}
}]
}
Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
vue 去掉元素之间的空格
{
test: /.vue$/,
loader: "vue-loader",
options: {
compilerOptions: {
preserveWhitespace: false
}
}
}
打包生成html文件 html-webpack-plugin 并且在plugins中实例化
单独打包css文件(非js文件) 引入extract-text-webpack-plugin这个插件 extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本
安装extract-text-webpack-plugin@next (webpack4推荐使用mini-css-extract-plugin)
使用 ：
引入 const ExtractPlugin = require('extract-text-webpack-plugin')
module中 test:/...需要打包成css文件./ , use:ExtractPlugin.extract（{loader....}）
在plugins中实例化 --- new ExtractPlugin('styles.[hash:5].css') -----css文件名