十三、webpack

webpack 是JavaScript应用的静态模块打包工具

webpack 为了可以正常运行，必须依赖 node 环境，node环境为了可以正常的执行很多代码，必须其中包含各种依赖的包， npm 工具就是 node packages manager

1、初识 webpack

前端模块化的方案：AMD、CMD、CommonJs、ES6

webpack 与 grunt / gulp 的对比：

grunt / gulp 的核心是 Task
- 配置一系列的 task，并且定义 task 要处理的事务（例如ES6、ts转化、图片压缩、scss转成css）
- 之后让 grunt / gulp 来依次执行这些task，而且让整个流程自动化，grunt / gulp 也被称为前端自动化任务管理工具
举例：gulp 的task
- 下面的 task 就是将src下面的所有js文件转成ES5的语法，并且最终输出到dist文件夹中
```js
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('js',()=>
gulp.src('src/*.js')
.pipe(babel({
```
presets:['es2015']
```
}))
.pipe(gulp.dest('dist'))
);
```
什么时候用 grunt / gulp ？
- 如果你的工程模块依赖非常简单，甚至没有用到模块化的概念
- 只需要进行简单的合并、压缩，就使用 grunt / gulp 即可
- 但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的 webpack 了

grunt / gulp 和 webpack 有什么不同呢？

- grunt / gulp 更加强调的是前端流程的自动化，模块化不是它的核心
- webpack 更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能

2、安装使用 webpack

2.1、webpack 的基本使用

切记：命令行敲命令一定要在对应的目录文件下才能生效

查看node版本：node -v
全局安装 webpack，指定自己依赖的版本号：npm install webpack@3.6.0 -g
查看webpack版本：webpack --version
该文件夹下建立dist文件夹以及src/main.js文件和src/mathUtils.js文件和index.html文件
```js
mathUtils.js
function add(num1,num2){
return num1 + num2
}
function mul(num1,num2){
return num1 * num2
}
// 1、commonjs 导出
module.exports = {
add,mul
}

info.js
// ES6的导出语法
export const name = 'why';
export const age = 18;
export const height = 1.88;

main.js
// 1、使用commonjs的模块化导入
const {add,mul} = require('./mathUtils')
// 打印
console.log(add(1, 2));
console.log(mul(2, 3));

// 2、使用ES6的模块化导入
import {name, age, height} from './info';
console.log(name, age, height);

- 一般的启动方式：`webpack .\src\main.js .\dist\bundle.js`
直接从 index.html 中引入即可：`<script src="./dist/bundle.js"> </script>`
### 2.2、webpack.config.js配置和package.json配置

- 在该文件夹下新建`webpack.config.js`文件

    ```c
    // 导入模块，从node包里进行导入
    const path = require('path')

    module.exports = {
      //入口：可以是字符串/数组/对象/，这里的入口只写一个，所以写一个字符串即可
      entry:'./src/main.js',
      //出口：通常是一个对象，里面至少包含两个重要属性，path和filename
      output:{
        // 动态的获取路径，此处获取的是绝对路径。resolve()对路径进行拼接，__dirname获取当前路径
        path: path.resolve(__dirname,'dist'),
        filename:'bundle.js'
      }
    }

npm初始化，生成package.json：npm init
根据package.json 文件中的依赖进行相对应的安装：npm install

如果想要执行 npm run build,，需要先在package.json文件中添加至脚本script中

  "scripts": {
     
     
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack"
    },

局部安装webpack，开发时依赖
```
第一步：局部安装
cd 对应目录
npm install webpack@3.6.0 --save-dev
第二步：启动webpack ，使用局部的 webpack
node_moules/.bin/webpack
```
3、webpack中使用css文件的配置
踩坑：1、要在该文件夹目录下进行局部配置，2、使用管理员身份运行webstorm
loader 使用过程：点击跳转官网学习

在src目录中创建一个 css 文件，在其中创建一个normal.css文件
步骤一：通过 npm 安装需要使用的 loader
```
  npm install --save-dev css-loader@2.0.2
```

步骤二：在 webpack.config.js 下进行配置

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

在 main.js 中导入

  // 1、使用  commonjs 的模块化规范
  const {
     
     add,mul} = require('./js/mathUtils.js')

  console.log(add(20, 30));
  console.log(mul(20, 30));

  // 2、 使用ES6的模块化的规范
  import {
     
     name,height,age} from "./js/info.js";
  console.log(name);
  console.log(age);

  // 3.依赖css文件
  require('./css/normal.css')

安装 style-loader

  npm install --save-dev style-loader@0.23.1

npm run build 运行

4、less 文件处理

项目中会使用 less、css、stylus来写样式

创建一个 css / special.less 文件，放在 css 文件中

  @fontSize:50px;
  @fontColor:orange;

  body{
     
     
    font-size: @fontSize;
    color: @fontColor;
  }

main.js 中引入

  // 1、使用commonjs的模块化导入
  const {
     
     add,mul} = require('./js/mathUtils')
  // 使用
  console.log(add(1, 2));
  console.log(mul(2, 3));

  // 2、使用ES6的模块化导入
  import {
     
     name, age, height} from './js/info';
  console.log(name, age, height);

  //3.依赖 css 文件
  require('./css/normal.css')

  // 4.依赖less文件
  require('./css/special.less')
  document.writeln('<h2>余婷的背景是红色</h2>')

安装 loader：npm install --save-dev less-loader@4.1.0 less@3.9.0

在 webpack.config.js 文件中的 rules 中选项配置相关内容

  // webpack.config.js
  module.exports = {
     
     
      ...
      module: {
     
     
          rules: [{
     
     
              test: /\.less$/,
              use: [{
     
     
                  loader: "style-loader" // creates style nodes from JS strings
              }, {
     
     
                  loader: "css-loader" // translates CSS into CommonJS
              }, {
     
     
                  loader: "less-loader" // compiles Less to CSS
              }]
          }]
      }
  };

5、webpack-图片文件处理

在n ormal.css 文件中引入图片路径如下：

  body{
     
     
      background:url("../img/test.jpg");
  }

安装 loader:npm install --save-dev url-loader

在 webpack.config.js 中进行配置 rules 选项

  {
     
     
          test: /\.(png|jpg|gif)$/,
          use: [
            {
     
     
              loader: 'url-loader',
              options: {
     
     
                limit: 8192
              }
            }
          ]
        }

当图片小于 8kb 时
当图片大于 8kb 时，就要安装 file-loader:npm install --szve-dev file-loader
再次打包 npm run build时，就会发现dist文件下多了一个图片文件

6、ES6语法转换成ES5 - babel

babel 的使用：npm install --save-dev babel-loader@7 babel-core@6.26.3 babel-preset-es2015@6.24.1

配置 webpack.config.js 文件，rules 选项中添加如下配置

   rules: [
      {
     
     
        test: /\.js$/,
        // exculde:排除，include：包含
        exclude: /(node_modules|bower_components)/,
        use: {
     
     
          loader: 'babel-loader',
          options: {
     
     
            presets: ['es2015']
          }
        }
      }
    ]

使用 npm run build打包执行，发现所有ES6语法皆变成了ES5的语法
7、webpack 配置Vue

7.1、安装配置使用Vue
npm 安装 Vue ：npm install vue@2.5.21 --save

【该步骤已被替换，可直接进行下一步操作】新建 src / vue / app.js 文件，并写入组件内容并导出

  export default {
     
     
    template:`
      <div id="app">
        <h2>我正在学习Vue开发{
     
     {
     
     message}}</h2>
        <button @click="btnClick">按钮</button>
        <h2>{
     
     {
     
     name}}正在学习Vue开发</h2>
      </div>`,
    data(){
     
     
      return{
     
     
        message:'Hello Webpack',
        name:'Mark'
      }
    },
    methods:{
     
     
      btnClick(){
     
     
        console.log('被点击事件');
      }
    }
  }

【该步骤已被替换，可直接进行下一步操作】新建 src / vue / App.vue 的vue component文件，并在相应内容块中写入相应组件内容

  <template>
    <div>
      <h2 class="title">我正在学习Vue开发{
     
     {
     
     message}}</h2>
      <button @click="btnClick">按钮</button>
      <h2>{
     
     {
     
     name}}正在学习Vue开发</h2>
    </div>
  </template>

  <script>
  export default {
     
     
    name: "App",
    data(){
     
     
      return{
     
     
        message:'Hello Webpack',
        name:'Mark'
      }
    },
    methods:{
     
     
      btnClick(){
     
     
        console.log('被点击事件');
      }
    }
  }
  </script>

  <style scoped>
    .title{
     
     
      color: green;
    }
  </style>

在 main.js 文件中导入 Vue 及组件 APP 使用

  // 5.使用vue开发
  import Vue from 'vue'
  // import App from './vue/app' 该方法已被注释，同上
  import App from "./vue/App.vue";
  new Vue({
     
     
    el:'#app',
    template:`<App/>`,
    // 注册组件
    components:{
     
     
      App
    }
  })

在页面 index.html 中写入id为app的挂载
```
  <div id="app"></div>
```

在 webpack.config.js 中配置

  model.exports= {
     
     
      resolve:{
     
     
          // alias:别名
          alias: {
     
     
                'vue$': 'vue/dist/vue.esm.js'
              }
           }
  }

安装 vue-loader 和 vue-template-compiler 作为解析：
npm install vue-loader@13.0.0 vue-template-compiler@2.5.21 --save-dev
执行 npm run build 进行运行

7.2、组件中使用组件

新建 src / vue / Cpn.vue 的vue component文件

  <template>
    <div>
      <h2>我是组件中的小组件</h2>
      <p>我是Cpn组件的内容</p>
      <h2>{
     
     {
     
     name}}</h2>
    </div>
  </template>

  <script>
  export default {
     
     
    name: "Cpn",
    data(){
     
     
      return{
     
     
        name:'Cpn组件的name'
      }
    }
  }
  </script>

  <style scoped>    
  </style>

新建 src / vue / App.vue 的vue component文件

  <template>
    <div>
      // 原组件内容
      <h2 class="title">我正在学习Vue开发{
     
     {
     
     message}}</h2>
      // 使用字组件
      <Cpn></Cpn>
    </div>
  </template>

  <script>
    // 导入子组件 Cpn
    import Cpn from './Cpn.vue'
    export default {
     
     
      name: "App",
      components:{
     
     
        Cpn
      },
      data(){
     
     
        return{
     
     
          message:'Hello Webpack',
        }
      },
    }
  </script>

  <style scoped>
  </style>

7.3、小Tips：在导入文件时省略后缀名，需在`webpack.config.js`中做修改：

在这里插入图片描述

8、webpack 的 plugin插件

plguin 是插件的意思，通常是用于对某个现有的架构进行扩展
webpack 中的插件，就是对webpack 现有功能的各种扩展，比如打包优化，文件压缩等等

loader 和 plugin 区别

loader 主要用于转换某些类型的模块，它是一个转换器
plugin 是插件，它是对 webpack 本身的扩展，是一个扩展器
plugin 的使用过程：
步骤一：通过 npm 安装需要使用的 plugins （某些webpack已经内置的插件不需要安装）
步骤二：在webpack.config.js中的plugins中配置插件
8.1、添加版权的 Plugin
导入 webpack 模块并使用Plugins设置版权

在这里插入图片描述

bundle.js 文件效果为：

/*! 最终版权归aaa所有 */
/******/ (function(modules) {
     
      // webpackBootstrap
/******/     // The module cache
。。。。。。

8.2、打包 html 的 plugin

HtmlWebpackPlugin插件可以自动生成一个 index.html（可以指定模板来生成）；并将打包的 js 文件，自动通过 script 标签插入到 body中
安装：npm install html-webpack-plugin@3.2.0 --save-dev
注释掉默认文件路径
使用：在 webpackconfig文件下修改如下，并 npm run build 运行

8.3、js压缩的 Plugin
使用第三方插件
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
修改 webpack.config.js文件，使用插件：然后执行 npm run build
查看打包后的 bunlde.js 文件，是已经被压缩过的

8.4、小TIps：使用该插件压缩js时，会将注释也删除，所以添加版权的插件与该插件两者不互存

9、webpack-dev-server搭建本地服务器
安装：npm install webpack-dev-server@2.9.3 --save-dev

配置 webpack.config.js 文件

  // 导入模块，从node包里进行导入
  const path = require('path')
  const webpack = require('webpack')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

  module.exports = {
     
     
    entry:'./src/main.js',
    resolve: {
     
     ...},
    output:{
     
     ...},
    module: {
     
     ...},
    plugins:[...],
    devServer:{
     
     
      contentBase:'./dist',// 为哪一个文件夹提供本地服务，默认是根文件夹./dist
      inline:true, // 页面实时刷新
      /*以下内容可添可不添
      port:端口号,默认跑在8080端口
      historyApiFallback：在SPA页面中，依赖HTML5的history模式
      */
    }
  }

在package.json文件中添加如下脚本，--open 可直接将生成的链接打开：
npm run server 执行文件，在生成的端口如下
优点是不再重新打包运行，而是当调试完毕后在运行 npm run build进行打包
10、webpack 配置文件的分离
进行抽离：开发时依赖一个文件，运行时依赖另一个文件，即用三个配置文件完成一个配置文件的使用
建立文件夹build用来存放配置文件，基础配置 base.config.js文件，开发时的配置 dev.config.js文件，生产时的配置 prod.config.js文件
即开发时要用 dev.config.js + base.config.js，生产时要用 prod.config.js + base.config.js
抽离完之后，使用他们就需要合并文件，分支合并到主干需要用到插件：npm install webpack-merge@4.1.5 --save-dev

合并与导出如下，prod.config.js 和 dev.config.js文件都需要执行合并与导出

  prod.config.js 文件
  const baseConfig = require('./base.config')
  // 将合并后的内容导出
  module.exports = webpackMerge(baseConfig,{
     
     
    plugins:[
      new UglifyjsWebpackPlugin()
    ]
  })

  dev.config.js 文件
  // 导入所需要的模块
  const webpackMerge = require('webpack-merge')
  const baseConfig = require('./base.config')
  module.exports = webpackMerge(baseConfig,{
     
     
    devServer:{
     
     
      contentBase:'./dist',
      inline:true
    }
  })

在 package.json文件中配置如下属性：
改动生成的dist文件的路径如下：修改base.config.js中的path

十四、Vue CLI 脚手架

对文章进行了重新整理，详情点击跳转：https://blog.csdn.net/qq_53810245/article/details/122901321

1、vuecli脚手架介绍和安装

1.1、介绍

Vue CLI 官网：https://cli.vuejs.org/zh/
使用 Vue.js 开发大型应用，需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。我们通常会使用一些脚手架工具来帮助完成这事情
CLI 是 Command-Line Interface，译为命令行界面，俗称脚手架
使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置
1.2、安装
环境要求：Node 环境要求 8.9 以上
安装 Vue 脚手架：npm install -g @vue/cli@3.2.1

拉取 2.x 模板（旧版本）：

 npm install -g @vue/cli-init@3.2.0
 # `vue init`的运行效果将会跟`vue-cli@2.x`相同
 vue init webpack my-project

Vue CLI2 初始化项目：vue init webpack my-project
Vue CLI3 初始化项目：vue create my-project
Vue 全家桶：VueCore + vue-route + vuex
创建Vue项目：vue init webpack vuecli2test相关配置如下：
1.3、目录结构详解

2、Vue程序运行过程

3、VueCLI3

3.1、VueCLI 创建项目和目录

3.2、目录结构详解

3.3、vueCLI3配置文件的查看和修改
启动配置服务器——vue图形化GUI界面：vue ui

在这里插入图片描述

Vuejs基础版V

十三、webpack

1、初识 webpack

2、安装使用 webpack

2.1、webpack 的基本使用

3、webpack中使用css文件的配置

4、less 文件处理

5、webpack-图片文件处理

6、ES6语法转换成ES5 - babel

7、webpack 配置Vue

7.1、安装配置使用Vue

7.2、组件中使用组件

7.3、小Tips：在导入文件时省略后缀名，需在`webpack.config.js`中做修改：

8、webpack 的 plugin插件

8.1、添加版权的 Plugin

8.2、打包 html 的 plugin

8.3、js压缩的 Plugin

8.4、小TIps：使用该插件压缩js时，会将注释也删除，所以添加版权的插件与该插件两者不互存

9、webpack-dev-server搭建本地服务器

10、webpack 配置文件的分离

十四、Vue CLI 脚手架

1、vuecli脚手架介绍和安装

1.1、介绍

1.2、安装

1.3、目录结构详解

2、Vue程序运行过程

3、VueCLI3

3.1、VueCLI 创建项目和目录

3.2、目录结构详解

3.3、vueCLI3配置文件的查看和修改

4、箭头函数的使用和 this 的指向

热门文章

最新文章

相关课程

相关电子书

Vuejs基础版V

十三、webpack

1、初识 webpack

2、安装使用 webpack

2.1、webpack 的基本使用

3、webpack中使用css文件的配置

4、less 文件处理

5、webpack-图片文件处理

6、ES6语法转换成ES5 - babel

7、webpack 配置Vue

7.1、安装配置使用Vue

7.2、组件中使用组件

7.3、小Tips：在导入文件时省略后缀名，需在webpack.config.js中做修改：

8、webpack 的 plugin插件

8.1、添加版权的 Plugin

8.2、打包 html 的 plugin

8.3、js压缩的 Plugin

8.4、小TIps：使用该插件压缩js时，会将注释也删除，所以添加版权的插件与该插件两者不互存

9、webpack-dev-server搭建本地服务器

10、webpack 配置文件的分离

十四、Vue CLI 脚手架

1、vuecli脚手架介绍和安装

1.1、介绍

1.2、安装

1.3、目录结构详解

2、Vue程序运行过程

3、VueCLI3

3.1、VueCLI 创建项目和目录

3.2、目录结构详解

3.3、vueCLI3配置文件的查看和修改

4、箭头函数的使用和 this 的指向

热门文章

最新文章

相关课程

相关电子书

7.3、小Tips：在导入文件时省略后缀名，需在`webpack.config.js`中做修改：