Webpack基础配置二
Webpack中的SASS使用
在Web里面我们刚刚使用了CSS进行了页面的样式处理，现在我们可以使用SASS来编写页面代码
第一步：安装模块
$ yarn add sass-loader node-sass --dev
第二步：编写sass文件
在项目下面新建scss文件，然后新建文件夹index.scss
$primaryColor:red;
@mixin pos($type,$left:initial,$top:initial,$right:initial,$bottom:initial) {
position: $type;
@if $type!=relative {
width: 100%;
}
left: $left;
top: $top;
right: $right;
bottom: $bottom;
@content;
}
.div2{
@include pos(absolute, 100px,100px){
height: 150px;
border: 1px solid $primaryColor;
width: 50px;
}
}
第三步：在入口文件中导入scss文件
//导入 SCSS文件
import "../scss/index";
第四步：在webpack.config.js中编写相应module
//webpack.config.js
let config ={
//省略前面的代码
module:{
rules:[
//.....前在省略
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"postcss-loader",
"sass-loader"
]
}
]
}
}
module.exports=config;
配置完成以后，就可以在项目里面使用scss了
处理CSS与SCSS里面的文件
在编写样式的时候，我们时常全使用背景图片或使用第三方的字体，如下所示
.div1{
width: 400px;
height: 400px;
border: 1px solid black;
transform: translateX(100px);
background-image: url("../img/9.jpg");
}
在上面的样式里面，我们使用了一个背景图片，这个时候，我们再次去编译打包这个项目的时候就会报错，因为我们并没有告诉webpack怎么样去处理这些文件。
webpack本质上只能片Javascript文件，对于非JavaScript的文件需要使用第三方的loader，所以，我们需要再次配置第三方的插件
对于文件的处理，webpack使用的主要是file-loader与url-loader
第一步：下载模块
$ yarn add file-loader url-loader --dev
第二步：配置模块
因为在CSS里面，主要使用的是字体与图片，所以我们分别对常见的图片模式与字体格式进行了配置，代码如下
//webpack.config.js文件
const config = {
//....省略前面的代码
module:{
rules:[
{
//解析图片
test: /\.(jpg|jpeg|png|svg|bmp|webp|gif)$/,
//如果要对某一个loader进行单独的配置，我们就给它一个对象进行配置，
//如果不配置直接往数组里面丢
use: [{
loader: "url-loader",
options: {
//8kb
limit: 1024 * 8
}
}]
}, {
//解析字体
test: /\.(ttf|eot|woff|woff2)$/,
use: ["url-loader"]
}
]
}
}
module.exports = config;
在上面的图片配置里面，我们可以看到我们加了一个自定义的配置options这个里面的limit属性代表当这个图片文件小于8kb的时候就转换为base64格式，否则直接以图片的形式存在
下面的字体我们使用了常见的四种字体格式
Webpack生产环境与开发环境
在开发过程当中，最常见的环境有开发环境与生产环境，针对不同的环境，我们要做不同的配置
开发环境主要是指程序员在开发过程当中所设置的环境，这个环境主要用于方便程序员调试，实时更新代码等信息
webpack的开发环境借助于第三方的模块webpack-dev-server与html-webpack-plugin，第一个插件用于启动一个http服务器，第二个插件用于启动我们的HTML文件，生成根据模板生成HTML文件。在上一节的笔记里面，我们已经带着同学们完成了webpack-dev-server的配置了，这里不做重复
同时在启动项目的时候，我们要在项目不如区分开发环境与生产环境，这个时候，需要向NodeJS的webpack程序里面注入一个环境变量，注入环境变量可以使用cross-env这个插件
第一步：安装cross-env插件
$ yarn add cross-env --dev
第二步：修改package.json里面的启动命令
在package.json里面，我们要把scripts里面的开发环境启动命令与生产环境的启动命令做如下更改
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},
在上面的命令里面，我们的corss-env NODE_ENV=production代表向当前的环境变量当中设置一个变量NODE_ENV，这个变量的值为
production同理，下面的corss-env NODE_ENV=development代表向当前的环境变量设置
development.后期在程序里面， 我们可以根据这个值来判断当前启动的到底是开发环境还是生产环境
第三步：配置webpack.config.js文件
-
首先，我们应该先获取当前的环境变量的值
NODE_ENV，这个值是上一步配置的，当启动项项目的时候会自动注入到环境变量里面去const isDev = process.env.NODE_ENV == "development" ? true : false; -
抽取公共的配置部分
在开发环境与生产环境下面，仍然有一些代码是我们共有的，我们把这些代码先行配置完成
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const webpack = require("webpack"); //通过下面的插件来抽离CSS文件 const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin"); // 自动之前之前生成的内容 以全webpack生成新的东西放进去 const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const config = { entry:["@babel/polyfill",path.join(__dirname,"./src/index.js")], output: { filename:"bundle.js" path: path.join(__dirname, "./dist") }, //配置转换规则 resolve: { //配置扩展名省略 extensions: [".scss", ".css", ".js", ".json"] }, module: { rules: [{ test: /\.js$/, use: ["babel-loader"], exclude: /node_modules/ }, { //解析图片 test: /\.(jpg|jpeg|png|svg|bmp|webp|gif)$/, //如果要对某一个loader进行单独的配置，我们就给它一个对象进行配置， //如果不配置直接往数组里面丢 use: [{ loader: "url-loader", options: { //8kb limit: 1024 * 8 } }] }, { //解析字体 test: /\.(ttf|eot|woff|woff2)$/, use: ["url-loader"] }] }, plugins: [ new HtmlWebpackPlugin({ title: "webpack第二课", template: "index.html", filename: "index.html", inject: true }), ] } -
第三步：根据环境变量的不同，各自添加不同的module与plugins
if(isDev){ config.devServer={ host:"0.0.0.0", port:9999, contentBase:"./dist", hot:false } config.module.rules.push({ test: /\.css$/, use: [ "style-loader", "css-loader", "postcss-loader" ] }, { test: /\.scss$/, use: [ "style-loader", "css-loader", "postcss-loader", "sass-loader" ] }); config.plugins.push(new webpack.HotModuleReplacementPlugin()) } else{ //生产环境 config.output.filename="bundle.[name].[contentHash].js"; config.module.rules.push({ //在这里，开发环境与生产环境要不一样，JS与CSS要分离 test: /\.css$/, use: ExtractTextWebpackPlugin.extract({ // 如果分离失败了，那么，就用style-loader插入到网页里面去 fallback: "style-loader", use: [ "css-loader", "postcss-loader" ] }) }, { test: /\.scss$/, use: ExtractTextWebpackPlugin.extract({ fallback: "style-loader", use: [ "css-loader", "postcss-loader", "sass-loader" ] }) }); config.plugins.push( new CleanWebpackPlugin(), new ExtractTextWebpackPlugin({ filename: "index.css" })) } //根据环境变量，重新设置webpack的模式 config.mode=process.env.NODE_ENV; module.exports = config;在上面的代码里面，我们可以看到，我们使用了一个插件ExtractTextWebpackPlugin，这个插件是一个CSS与JS分离的插件，因为在生产模式下面，我们的CSS代码要与JS代码分离成不同的文件，所以需要使用一个像这样的插件
同时，在生产模式下面，我们也可以看到，在CSS与SCSS的配置环节是不一样的，是调用了ExtractTextWebpackPlugin.extract的方法
其中，在开发环境下面，我们添加了一个插件
config.plugins.push(new webpack.HotModuleReplacementPlugin()),这个模块是用于添加热模块替换的插件。【关于热模块替换，可以自行厚度】这个时候，当我们去执行
npm run dev就启动的开发环境，执行npm run build就执行了生产环境
评论区