前端工程化之webpack-cli一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

简介

什么是工程化？就是将现有的前端代码进行模块化（逻辑和页面部分）、组件化（将能复用的功能和页面进行封装）、规范化（开发规范、流程、文档、接口）、自动化（构建、部署、运行）

初始化

初始化

npm init -y //初始化npm配置文件
npm i --save-dev webpack //安装核心库
npm i --save-dev webpack-cli //安装命令行工具

.npmrc 使用npm安装时下载速度会慢很多，所以咱们需要安装淘宝镜像，npm命令如下：

npm config set registry https://registry.npm.taobao.org

从此过上了速度七十迈的生活！

但是有一个问题，万一别人克隆了你的项目之后，准备在他的本地进行开发的时候，并没有设置淘宝镜像源，又要让人家去动手设置，我们作为项目的开发者，要为人家剩下时间把，所以只需要在根目录下添加一个.npmrc并简单配置即可:

创建.npmrc文件

touch .npmrc

在该文件内配置

registry = https://registry.npm.taobao.org

创建webpack配置文件（名称:webpack.config.js）引入path文件，配置入口，出口和filename文件名称、打包地址等

const path = require("path");
module.exports = {
 entry: "./src/index.js",
 output: {
 path: path.resolve(__dirname, "./dist"),
 filename: "[name].js",
 },
 mode: "development",
}

样式处理

css样式
集成css样式处理：css-loader style-loader

安装

npm i style-loader css-loader -D

配置配置test后缀为.css，配置use为style-load和cssloader（style内样式和css文件样式）

module: {
     rules: [
       {
         test: /\.css$/,
         use: ["style-loader", "css-loader"],
       },
     ],
},

集成less和sass

命令行安装 npm i node-sass sass-load -D or npm i less less-loader -D
配置和上述一样需要配置rules内的test和use,只不过把test替换为/\.scss$/和/\.less$/

 rules: [
   {
     test: /\.scss$/,
     use: ["style-loader", "css-loader",'sass-loader'],
   },
 ],

集成postcss 这个相当于是babel的js，它的主要功能有两个，第一个：把css解析成js可以操作的抽象语法树AST，第二个：调用插件来处理AST并得到结果，所以postcss一般都是通过插件来处理CSS，并不会直接处理比如：

自动补齐浏览器前缀：autoprefixer

压缩css等cssnano

安装命令 npm install postcss-load autoprefixer cssnano -D
配置创建postcss.config.js并配置，并在plugins中引入

module.exports = {
 plugins: [require("autoprefixer")],
};

配置package.json

在内写入 "browserslist":["last 2 versions", "> 1%"]

在postcss.config.js里配置

 plugins: [
     require("autoprefixer")({
     overrideBrowserslist: ["last 2 versions", "> 1%"],
     }),
 ],

样式分离

经过如上几个loader的处理，css最终是打包在js中，运行时会动态插入head中，但是我们一般在生产环境中，会把css文件分离出来，有利于用户端缓存、并行加载及减小js包的大小

安装

npm i mini-css-extract-plugin -D

配置

request(mini-css-extract-plguin) 在module内的rules中的use中配置load和options热更新，插件内需要参与模块解析，需在use的loader中设置，不在需要style-loader

module:{
  rules:[{
    text:/.less/,
    use:[
      loader:request(mini-css-extract-plugin),
      options:{html:true}
    ]
  }]
}

参考资料

extract-plugin插件