今天呐，主要学习目标是实现自定义实现css-loader,less-loader,style-loader
- 项目准备
-
初始化 详见 webpack工程化实战day1
-
.npmrc 当我们使用npm安装包依赖时，下载速度会比较慢，这是我们会选择将npm源设为淘宝镜像源，在控制台执行以下命令：
npm config set registry https://registry.npm.taobao.or
考虑到假设当其他人克隆了你的项目之后，准备在本地开发，但是并没有设置淘宝镜像，这是还是需要再次手动设置，为了节省这个操作，可以在项目根目录添加.npmrc并进行配置
# 创建.npmrc文件
touch .npmrc
# 配置
registry=https://registry.npm.taobao.org/
- 创建src目录及入口文件
- 创建webpack配置文件，默认设置 见day
- 样式处理 见day1 css-loader style-loader 集成less sass
以下都是新知识点哦！！
-
集成postcss
相当于babel于JS
postcss的主要功能：
- 把css解析成JS可以操作的抽象语法树AST
- 调用插件来处理AST并得到结果，postcss通常都是通过插件来处理css
案例： - 自动补齐浏览器前缀：autoprefixer - css压缩等cssnano npm install postcss-loader autoprefixer cssnano -D # 创建postcss.config.js # 配置 module.exports = { plugins: [require("autoprefixer")] } # 配置package.json "browserslist":["last 2 versions", "> 1%"] # 或者直接在postcss.config.js里配置 module.exports = { plugins: [ require("autoprefixer")({ overrideBrowserslist:["last 2 versions", "> 1%"] }) ] } # 或者创建.browserslistrc文件 >1% last 2 versions not ie <= 8 -
样式文件分离
经过以上几个loader处理，css最终是打包在js中的，运行时会动态掺入head中，但是在生产环境中我们一般会把css文件分离出来(有利于用户端缓存、并行加载及减小js包的大小),这时需要用到mini-css-extract-plugin插件。
一般用于生产环境
# 安装
npm install mini-css-extract-plugin -D
# 使用
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use:[
// 插件需要参与模块解析，需要在这里设置，不需要style-loader
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: true, // 模块热替换，仅在开发环境开启， // ...其他配置
}
}，
'css-loader',
'postcss-loader',
'less-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'， // 输出文件的名字
// ...其他配置
})
]
}
- 在保证以上运行正常情况下，继续以下步骤
- 在根目录下建立myLoaders文件夹
并建立自定义的loader名称，例如：gj-less-loader.js,gj-css-loader.js,gj-style-loader.js
- 在webpack.config.js中修改相应配置
添加配置：
resolveLoader: {
modules: ["node_modules", "./myLoaders"]
}, // 这个配置会帮我们处理文件路径问题
把module中的对用less模块的loader替换成自定义的loader名称
# gj-less-loader.js
const less = require('less')
module.exports = function(source){
less.render(source, (error, output)=> {
let {css} = output
this.callback(error, css)
})
}
# gj-css-loader.js
module.exports = function(source){
// 序列化 css-loader支持css语法
return JSON.stringify(source)
}
# gj-style-loader.js
module.exports = function(source) {
let script = `const styleTag = document.createElement('style');
styleTag.innerHTML = ${source};
document.head.appendChild(styleTag)
`;
return script;
};
运行正常
结束
