江在川上曰：webpack前端工程化

前端工程化

1.模块化相关规范

1.1浏览器端模块化规范

名称	文件
AMD	Require.js
CMD	Sea.js

1.2 服务器端模块规范

common.js

1.3 大一统的模块化规范(ES6)

定义：

• 每个js文件都是一个独立的模块
• 导入模块成员使用import关键字
• 暴露模块成员使用export关键字

1.4 webpack工程化

(1)创建文件、进行打包

//创建空项目
npm init -y

//创建项目文件开发目录
mkdir src

//npm导入jquery文件
npm install jquery -S

//开发项目后要进行webpack打包
npm install webpack webpack-cli -D
//在根目录下创建webpack.config.js文件，里面写入
module.exports = {
  mode: "development", //development开发 production发布
};
//在package.json文件中找到scripts,写入"dev":"webpack"
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack"
  },
//使用命令进行打包
npm run dev

运行得到：

D:\JCWeb\JCTest\Vue\webpack\first>npm run dev

> first@1.0.0 dev D:\JCWeb\JCTest\Vue\webpack\first
> webpack

Hash: e8db307546f4032061d5
Version: webpack 4.43.0
Time: 435ms
Built at: 2020-05-31 21:26:08
  Asset     Size  Chunks             Chunk Names
main.js  322 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/index.js] 138 bytes {main} [built]
    + 1 hidden module

会在根目录下生成一个dist的打包文件

(2)配置打包的入口和出口

webpack.config.js

// 导入node中的path模块
const path = require("path")

module.exports = {
    // 编译模式
    mode: "development", //development production
    entry: path.join(__dirname,"./src/index.js"),//待打包文件
    output: {
        path: path.join(__dirname,"./dist"),//输出文件的存放路径
        filename: "bundle.js"//输出文件的名称
    }
};

(3)配置webpack的自动打包功能

//安装自动打包工具
npm install webpack-dev-server -D

//修改package.json下的dev命令
"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1",
	"dev":"webpack-dev-server"//script节点下的脚本，可以通过npm run运行
},

//将src中index.html的script脚本引用路径改为"/buldle.js"
<script src="../dist/bundle.js"></script>

//运行重新打包
npm run dev

运行成功：

D:\JCWeb\JCTest\Vue\webpack\first>npm run dev

> first@1.0.0 dev D:\JCWeb\JCTest\Vue\webpack\first
> webpack-dev-server

i ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\JCWeb\JCTest\Vue\webpack\first
i ｢wdm｣: Hash: f5436783083a9d330607
Version: webpack 4.43.0
Time: 617ms
Built at: 2020-05-31 21:51:11
    Asset     Size  Chunks             Chunk Names
bundle.js  680 KiB    main  [emitted]  main
Entrypoint main = bundle.js

会生成一个实时服务器，会自动根据文件更改进行更新。

(4)配置html-webpack-plugin生成预览页面

安装预览页面的插件

npm install html-webpack-plugin -D

修改webpack.config.js文件的头部区域，添加如下配置信息

// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template:"./src/index.html",//指定要用到的模板文件
    filename:"index.html"//指定生成的文件名称，该文件存在于内存中，在目录中不显示
})

修改webpack.config.js文件向外暴露的配置文件，新增节点

module.exports = {
    // 编译模式
    mode: "development", //development production
    entry: path.join(__dirname,"./src/index.js"),
    output: {
        path: path.join(__dirname,"./dist"),//输出文件的存放路径
        filename: "bundle.js"//输出文件的名称
    },
    plugins:[htmlPlugin]//plugins数组是webpack打包期间会用到的一些插件列表
};

此时完整文件是：

// 导入node中的path模块
const path = require("path")
// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template:"./src/index.html",//指定要用到的模板文件
    filename:"index.html"//指定生成的文件名称，该文件存在于内存中，在目录中不显示
})

module.exports = {
    // 编译模式
    mode: "development", //development production
    entry: path.join(__dirname,"./src/index.js"),
    output: {
        path: path.join(__dirname,"./dist"),//输出文件的存放路径
        filename: "bundle.js"//输出文件的名称
    },
    plugins:[htmlPlugin]//plugins数组是webpack打包期间会用到的一些插件列表
};

错误解决：

cnpm install webpack webpack-dev-server webpack-cli --save-dev

(5)配置自动打包的相关参数

//在package.json中修改dev
"dev": "webpack-dev-server --open --host 127.0.0.1 --post 8080"

运行便会自动进入服务器

1.5 webpack中的加载器

1. loader加载器，协助webpack进行打包

   安装处理css文件的loader

   npm i style-loader css-loader -D
   

   在webpack.config.js的module->rules数组中，添加loader规则

   module:{
           rules:[
               // test表示匹配的文件类型，use表示对应要调用的loader
               // use数组中的指定的loader顺序是固定的
               // 多个loader的调用顺序是：从后往前进行调用
               { test:/\.css$/,use:["style-loader","css-loder"] }
           ]
       }
   

   最新代码:

   // 导入node中的path模块
   const path = require("path")
   // 导入生成预览页面的插件，得到一个构造函数
   const HtmlWebpackPlugin = require("html-webpack-plugin")
   // 创建插件的实例对象
   const htmlPlugin = new HtmlWebpackPlugin({
       template:"./src/index.html",//指定要用到的模板文件
       filename:"index.html"//指定生成的文件名称，该文件存在于内存中，在目录中不显示
   })
   
   module.exports = {
       // 编译模式
       mode: "development", //development production
       entry: path.join(__dirname,"./src/index.js"),
       output: {
           path: path.join(__dirname,"./dist"),//输出文件的存放路径
           filename: "bundle.js"//输出文件的名称
       },
       plugins:[htmlPlugin],//plugins数组是webpack打包期间会用到的一些插件列表
       module:{
           rules:[
               // test表示匹配的文件类型，use表示对应要调用的loader
               // use数组中的指定的loader顺序是固定的
               // 多个loader的调用顺序是：从后往前进行调用
               { test:/\.css$/,use:["style-loader","css-loader"] }
           ]
       }
   };
   

2. 配置postCSS自动添加css的兼容前缀

   安装相关插件

   npm i postcss-loader autoprefixer -D
   

   在项目根目录中创建postcss的配置文件postcss.config.js，并初始化如下配置：

   const autoprefixer = require("autoprefixer");//导入自动添加前缀的插件
   
   module.exports = {
     plugins: [autoprefixer],
   };
   

   在webpack.config.js的module->rules数组中，修改css的loader规则

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

3. 配置less-loader加载器

   安装处理less文件的loader加载器

   npm i style-loader less-loader -D
   

   在webpack.config.js的module->rules数组中，添加loader规则

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

4. 配置sass-loader加载器

   安装处理sass文件的loader加载器

   npm i sass-loader node-sass -D
   

   在webpack.config.js的module->rules数组中，添加loader规则

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

5. 打包样式表的图片和文字

   安装相关插件包

   npm i url-loader file-loader -D
   

   在webpack.config.js的module->rules数组中，添加loader规则

   { 
       test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
       use: "url-loader?limit=16920"
   },
   

   其中?后面接的是loader的参数项，limit用来指定图片的大小，字节为byte。

6. 打包处理js文件中的高级语法

   安装babel转换器相关的包

   npm i babel-loader @babel/core @babel/runtime -D
   

   安装babel语法插件相关的包

   npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
   

   在根目录中，创建babel配置文件babel.config.js并初始化基本配置如下

   module.exports = {
     presets: ["@babel/preset-env"],
     plugins: [
       "@babel/plugin-transform-runtime",
       "@babel/plugin-proposal-class-properties",
     ],
   };
   

   在webpack.config.js的module->rules数组中，添加loader规则

   { test: /\.js$/, use: "babel-loader", exclude: /node_modules/}
   

1.6 vue单文件模块化开发

1.6.1创建vue单文件

<template>
    <div id="box"></div>
</template>
<script>
    // 这里是用来处理vue组件的业务逻辑的
    export default {
        data(){
            return{//私有数据

            }
        },
        methods:{//处理函数

        }
    }
</script>

<style lang="less" scoped>
// scoped防止样式冲突
#box{
    background-color: red;
}
</style>

1.6.2在webpack中配置vue组件的加载器

安装配置插件文件

npm i vue-loader vue-template-compiler -D

在webpack.config.js配置文件中，添加vue-loader的配置项如下：

// 引入vue加载器插件
const VueLoaderPlugin = require("vue-loader/lib/plugin")

{ test: /\.vue$/, loader: "vue-loader" },

plugins: [
    // 插件
    new VueLoaderPlugin(),//请确保引入了此插件
],

1.6.3在webpack项目中使用vue

安装相关插件

npm i vue -S

在index.js文件中配置

// 导入vue构造函数
import Vue from "vue"

// 导入App根组件
import App from "./components/App.vue"


const vm = new Vue({
    // 指定vm实例要控制的页面区域
    el:"#app",
    // 通过render函数，把指定的组件渲染到el区域中
    render:h=>h(App)
})

1.7 webpack打包发布

在package.json中配置：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --host 127.0.0.1 --post 8080",
    //用于打包的命令
    "build":"webpack -p"
  },

运行：

npm run build