Vuejs学习笔记--webpack笔记

1. webpack：模块化的打包工具

1.1 基础打包命令

webpack ./src/main.js ./dist/bundle.js

补充： commonjs和es6的导入导出区别

commonjs的导出是 modules.export = {}，导入是  const x = require('xxx.js')

es6的导出是 export {}，导入是 import x from 'xxx.js'

2. webpack配置

2.1 webpack安装

 2.1.1 安装Node.js

 2.1.2 全局安装webpack（先指定版本是3.6.0，因为vue cli2 依赖此版本）

npm install webpack@3.6.0 -g

 2.1.3 局部安装（后续学了再更）

  •  -save -dev 是开发依赖，项目打包后不需要继续使用
cd 对应目录
npm install webpack@3.6.0 -save -dev

补充：基本Nodejs命令

  • 安装项目依赖：node install
  • 初始化package.json：node init
  • 导入path模块：const path = require('path')

2.2 webpack配置--默认入口和出口，打包js文件

 2.2.1 创建webpack.config.js文件

 2.2.2 配置默认 入口文档 和 出口文档、路径

  •  entry：入口
  •  output：出口
const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
}

 2.2.3 简化命令 打包（终端输入webpack，优先按照全局的依赖包版本打包）

webpack

 2.2.4 项目实际应用：打开package.json（“scripts”：脚本），“scripts”中添加自定义命令，关联实际执行的命令即可。

{
    "name": "meetwebpack",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
    },
    "author": "",
    "license": "ISC"
}

 2.2.5 执行使用：（通过脚本输入npm run build ，优先在本地的node_modules/bin路径下找对应命令，如果没有找到才会全局寻找）

npm run build

2.3 webpack配置--loader

目的：打包css，图片，将ES6转为ES5，将TypeScript转为ES5代码，scss和less转css，将jsx、vue文件转为js等等

 2.3.1 基本使用

 2.3.2 打包css文件和less文件为例：

  • 路径：中文文档 -- LOADERS -- 样式 -- css-loader  就能看到详细的使用说明
  • 安装：npm install --save-dev css-loader@3.6.0      /      npm install --save-dev style-loader@1.1.3        /      npm install --save-dev less-loader@4.1.0 less@3.9.0
  • 配置：webpack.config.js 文件中添加 module 属性，
  • 注意：css-loader 只负责将css文件加载，style-loade 负责将样式添加到DOM元素中，使用多个loader时，是从右向左读取
  • 常见错误：
  • 终端提示：Module build failed: TypeError: this.getOptions is not a function
  • 解决方案：一般是版本过高导致，降低loader版本即可
const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                // css-loader 只负责将css文件加载
                // style-loade 负责将样式添加到DOM元素中
                // 使用多个loader时，是从右向左读取
                use: ['style-loader', 'css-loader'],
            },
            {
                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
                    },
                ],
            },
        ],
    },
}

 2.3.3 打包图片文件：

  • 安装：npm install --save-dev url-loader@1.1.2      /      npm install --save-dev file-loader@3.0.1
  • 配置：webpack.config.js 文件中添加 module 属性。limit属性：限制图片的大小
  • 说明：当加载的图片，小于limit时，会将图片编译成base64字符串格式。当加载的图片 ，大于limit时，需要使用file-loader模块进行加载，图片会打包到dist文件夹下。
  • 常见问题：
  • 当图片大于limit时，打包成功后，图片仍不显示。---------------> 在webpack.config.js配置文件的 output选项中 加上以下配置：publicPath: 'dist/'
  •  将打包的图片重命名。---------------> 在webpack.config.js配置文件的 options选项中 加上以下配置：name: 'img/[name].[hash:8].[ext]'

 2.3.4 打包ES6语法转为ES5

  • 安装：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
  • 配置：webpack.config.js文件
  • 官网安装：npm install babel-loader babel-core babel-preset-env webpack
  • 官网配置：webpack.config.js文件
  • 注意：如果这样配置，就会去找.bablerc的文件，具体这个文件是啥，会在脚手架的课程的学习到

2.4 webpack配置--Vuejs：

 2.4.1 安装

npm install vue@2.5.21 --save

 2.4.2  常见报错：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. 
Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

原因：vue构建版本的时候，构建两类：一个是runtime-only，一个是runtime-compiler。

runtime-only  -->  代码中，不可以有任何的template

runtime-compiler  -->  代码中，可以有template，因为compiler可以用于编译template

解决方案：在webpack.config.js配置文件下的module.exports添加resolve属性

module.exports = {
    entry: './src/main.js',
    output: {},
    module: {},
    resolve:{
      alias:{
      'vue$':'vue/dist/vue.esm.js'
      }
    }
}

这个配置的意思是，当我们在代码中通过import Vue from 'vue'这种代码引入vue的时候，会去webpack的配置文件当中看看，vue是否指向了具体的文件夹，我们是指向了具体的文件夹vue/dist/vue.esm.js。这个时候，就不会按照默认的方式，寻找文件了。配置了之后，就会去node_modules目录当中，找到vue。见下图

 

2.4.3 常识内容：

SPA（simple page web application）单页面富应用：一般只有一个html代码。

多个页面是通过路由（vue-router）进行跳转的。这个路由，我们称之为前端路由。

2.4.4 实际项目应用：

问题：目前的代码方式，无论是data数据还是自定义组件等，都是需要频繁的修改index.html文件，后续不希望频繁修改html文件

解决：①index.html文件中，只保留<div id="app"></div>

           ②在Vue实例中，定义一个template属性，将展示数据放在template属性下（编译之后，el和template同时存在时，会将template 的内容替换el属性对应html标签），如下图

2.4.5 代码优化：

  • 通过组件的方式，将template、data、methods等属性放在组件中
  • 在Vue实例中引用组件，并在tamplate属性中使用组件
  • 将组件的内容单独封装到一个js文件中，通过import方式引入，原组件可以去除（const App可以删了）

 

2.4.6 最终方案：

将js文件内容，抽离到单独的一个vue文件中，最终如下图所示：

此时编译仍会报错，需要安装打包vue的loader文件

 

 2.4.7 webpack配置--打包vue文件

  • 安装：npm install --save-dev vue-loader@15.4.2 vue-template-compiler@2.5.21

  • 配置：webpack.config.js文件
  •  注意：vue-loader从14版本后，要使用vue-loader还需要配置插件，如果不想使用配件，可以使用低版本的vue-loader。npm install --save-dev vue-loader@13.0.0 vue-template-compiler@2.5.21

3. webpack的Plugin：

3.1 版权声明plugin

类型：webpack内置plugin

导入：const webpack = require('webpack')

配置：module.exports = { plugins: [new webpack.BannerPlugin('最终版权归我所有')],}

3.2 打包html的plugin

类型：npm下载

命令：npm install html-webpack-plugin@3.2.0 --save-dev

导入：const HtmlWebpackPlugin = require('html-webpack-plugin')

配置：webpack.config.js文件下

3.3 压缩JS的plugin

类型：npm下载

命令：npm install uglifyjs-webpack-plugin@1.1.1 --save-dev   

导入：const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

配置：webpack.config.js文件下

3.4 搭建本地服务器进行测试的plugin

类型：npm下载

命令：npm install webpack-dev-server@2.9.3 --save-dev   因为要跟cli2匹配：webpack@3.6.0+webpack-dev-server@2.9.3

配置：webpack.config.js文件下，如下图

问题：直接使用webpack-dev-server，会报错。原因：只要你是在终端当中输入的命令，默认都是去全局当中寻找对应的命令程序的。

解决：./node_modules/.bin/webpack-dev-server

优化：在package.json文件中配置脚本后，执行 npm run dev 即可

4. webpack配置文件的分离

4.1 配置文件分离

 4.1.1 新建三个文件：base.config.js，dev.config.js，prod.config.js

  • base.config.js当中准备放置一些公共的配置
  • dev.config.js当中放置的是开发时候需要用到的webpack的配置
  • prod.config.js当中放置的是编译时候需要用到的webpack的配置

 4.1.2 配置文件组合

  • 开发时候需要的配置文件组合是dev.config.js+base.config.js
  • 编译时候需要的配置文件组合是prod.config.js+base.config.js

4.2 安装webpack-merge合并包

 4.2.1 命令：npm install webpack-merge@4.1.5 --save-dev

 4.2.2 dev.config.js+base.config.js合并：导入webpack-merge包+公共配置，进行合并

 4.2.3 prod.config.js+base.config.js合并：导入webpack-merge包+公共配置，进行合并

4.3 修改package.json中脚本的打开路径

背景：原来的webpack.config.js 没有用了，所以可以删除了，但删除之后，直接打包会报错

解决：将默认从webpack.config.js 打开，修改为从指定文件中打开

4.4 修改base.config.js文件中的path路径

原因：按照原路径path: path.resolve(__dirname, 'dist')打包，最终会建在build文件夹下

解决：要将打包文件，放在根目录下，需这样修改：path: path.resolve(__dirname, '../dist'),

 

 

posted @ 2021-09-25 23:26  天黑请闭眼、  阅读(72)  评论(0)    收藏  举报