Vue学习—-第三天webpack（学习webpack看这一篇就够了1.8w字）【6.7】weixin43848802的博客-

一、认识webpack

官方网址：https://www.webpackjs.com/

1.什么是webpack

webpack是一个前端模块化打包工具

2.前端模块化

3.和grunt/gulp打包工具的对比

grunt/gulp更强调的是自动化、定义一些任务
webpack更强调模块化

二、webpack安装

1.webpack安装

webpack为了正常运行，必须依赖node环境
node环境为了正常执行代码，必须依赖其包含的各种依赖的包
npm(node packages manager)包管理工具，为了管理node的各种依赖包

如果安装webpack4+版本，则可以运行以下命令：
npm install webpack webpack-cli -D

2.cmd中输入webpack -v显示webpack不是命令

1. 创建文件夹
   我的nodejs默认安装路径为：D:programnodejs
   在此文件夹下创建两个文件用于全局存放依赖包路径和缓存路径
   
2. 配置路径
   在cmd中输入以下代码，配置缓存路径:
   npm config set cache "D:programnodejsnode_cache"
   回车后再输入以下代码后，回车，配置全局依赖包：
   npm config set cache “D:programnodejsnode_global”`
3. 安装webpack
   和上面内容相同，请查看1.webpack安装
4. 环境变量配置
   我的电脑→右键属性→高级系统设置→高级→环境变量
   或：控制面板→系统和安全→系统→高级系统设置→高级→环境变量
   
5. 查看webpack版本
   

三、webpack起步

1.准备工作

使用commonJS
module.exports = {}导出
const { } = require('')导入，括号里为导入文件路径

2.js文件打包

在文件根目录打开命令行工具，输入：
webpack ./src/main.js ./dist/main.js --mode development
意思是把src目录中main文件，打包到dist中以main命名的文件

3.使用打包后的文件

然后再index.html文件中，引入刚打包好的dist中main文件，浏览器打开即可。

四、webpack配置

1.命令行输入npm init

目的生成package.json文件

2.入口和出口

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

3.局部安装webpack、webpack-cli

第二步不推荐使用，更好的方法往下看

4.package.json

在script中配置了build：webpack，表示如果执行打包：npm run build，则会优先使用本地webpack打包而不是全局的webpack。

五、css-loader的使用

1.什么是loader

webpack中loader网址：https://www.webpackjs.com/loaders/

2.css文件处理-准备工作

3.css文件处理-打包报错信息

安装css-loader即可解决

4.css文件处理-css-loader

css-loader只负责加载css文件，不负责把具体样式嵌入到css文件中。 需要安装style-loader 

在webpack.config.js中加上以下代码：

5.css文件处理-style-loader

1.安装style-loader，命令行运行：npm install style-loader --save-dev
2.配置，在webpack-config-js文件中，css-loader前面输入：style-loader
webpack读取使用loader是从右到左

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

自动添加浏览器兼容前缀
-moz-：代表Firefox火狐浏览器私有属性
-ms-：代表IE浏览器私有属性
-webkit-：代表Safari、Chrome私有属性
-o-：代表Opera私有属性
具体操作如下：
1.运行npm install postcss-loader autoprefixer -D命令
2.在项目根目录创建postcss配置文件postcss.config.js，并初始化如下配置

// 导入自动添加前缀的插件 const autoprefixer = require('autoprefixer') module.exports = { // 挂载插件   plugin: [ autoprefixer ] } 

3.在webpack.config.js的module→rules数组中，修改css的loader规则如下：

六、less文件处理

1.less文件处理-准备工作

2.less文件处理-less-loader

1.命令行安装：npm install --save-dev less-loader less
2.webpack.config.js中配置：

七、图片文件处理

1.图片处理-资源准备阶段

2.图片处理-url-loader

1、运行：npm install --save-dev url-loader,安装插件
2、修改webpack.config.js中的配置，如下图
3、如果图片大小小于option中limit值，则可正常打包，如果图片大小大于limit值该怎么办？

3.图片处理-file-loader

图片大小大于limit值，则要安装file-loader插件
运行：npm install file-loader -D(或--save-dev)

4.运行npm run build发现没有图片显示，并改变打包后图片的命名★★★★

原因： css中图片文件路径引入出错，应该引入dist文件中对应的图片文件（文件名改变）
解决方法：在webpack.config.js文件中，output中新增publicPath: 'dist/'意思是，在打包中所有的url都会在前面默认拼接上dist/

八、babel的使用

1.ES6语法转换为ES5

以下方式可能过于老了，也可自行按照官网操作： https://www.webpackjs.com/loaders/babel-loader/ 

如es6中的const、let
1.运行npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
2.webpack.config.js文件中添加：

{   test: /.js$/, // exclude排除   exclude: /(node_modules|bower_components)/,   use: {     loader: 'babel-loader',     options: { // 如果这样写，会自动去找babelrc文件 // presets: ['@babel/preset-env']       presets: ['es2015'] } } } 

九、webpack配置vue

1.引入vue.js

1.运行：npm install vue --save
2.在main.js文件中引入以下代码：

import Vue from 'vue' const app = new Vue({   el: '#app',   data: {     message: 'Hello webpack' } }) 

2.打包项目-错误信息

runtime-only：代码中，不可以有任何template
runtime-compiler：代码中，可以有template，因为compiler可以用于编译template
在webpack.config.js中配置以下内容：resolve和module平级

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

3.el-template区别

4.vue组件化开发引入

index.html不变:

 <div id="app"> <h2>{{message}}</h2> </div> 

第一步：将vue实例中的template里面的代码抽离出来到同页面，设置一个组件中。

// App组件 const App = {   template: `   <div>     <h2>{{message}}</h2>     <button @click="btnClick">按钮</button>     <h2>{{name}}</h2>   </div>   `, data() { return {       message: 'Hello webpack',       name: 'lvan' } },   methods: { btnClick() {       console.log('template') } } } new Vue({   el: '#app',   template: '<App/>', // 注册组件   components: {     App   } }) 

第二步：继续抽离，把组件中代码抽离到一个单独文件app.js中，再在main.js文件中引入
app.js：

export default {   template: `   <div>     <h2>{{message}}</h2>     <button @click="btnClick">按钮</button>     <h2>{{name}}</h2>   </div>   `, data() { return {       message: 'Hello webpack',       name: 'lvan' } },   methods: { btnClick() {       console.log('template') } } } 

main.js:

import Vue from 'vue' import App from './vue/app' new Vue({   el: '#app',   template: '<App/>',   components: {     App   } }) 

第三步：继续抽离，把组件中代码抽离到一个单独文件App.vue中，再在main.js文件中引入，npm run build会报错如下，解决方法看下5

App.vue:

<template>   <div>     <h2 class="title">{{message}}</h2>     <button @click="btnClick">按钮</button>     <h2>{{name}}</h2>   </div> </template>  <script> export default {   data() {     return {       message: 'Hello webpack',       name: 'lvan'     }   },   methods: {     btnClick() {       console.log('template')     }   } } </script>  <style scoped>  .title {    color: green;  } </style> 

main.js:

import Vue from 'vue' import App from './vue/app.vue' new Vue({   el: '#app',   template: '<App/>',   components: {     App   } }) 

5. .vue文件封装处理

1、运行命令：npm install vue-loader vue-template-compiler --save-dev
2、修改webpack.config.js配置
在文件头部加上const VueLoaderPlugin = require('vue-loader/lib/plugin')
在module.exports中module平级下添加代码如下：

6.配置打包引入文件的后缀可省略

如以下代码，运行打包会报错，显示找不到Cpn这个文件：

解决方案：在webpack.config.js文件中，配置红色框中代码

十、plugin的使用

1.认识plugin

2.添加版权的plugin

3.打包html的plugin

方式1：
1、运行npm install html-webpack-plugin --save-dev
2、把webpack.config.js中output中的publicPath：‘dist/’去除
3、在webpack.config.js中头部加上
const HtmlWebpackPlugin = require('html-webpack-plugin')
4、在plugins中加入以下代码：

new HtmlWebpackPlugin({ // 指定的模板，也就是根目录中的index文件  template: 'index.html' }) 

方式2：
1、运行npm install html-webpack-plugin -D,安装插件
2、修改webpack.config.js文件头部区域，添加如下配置信息

const HtmlWebpackPlugin = require('html-webpack-plugin') const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象   template: './src/index.html', // 指定要用到的模板文件   filename: 'index.html' // 指定生成的文件名称，该文件存在内存中，在目录中不显示 }) 

3、修改webpack.config.js文件中向外暴露的配置对象。新增节点
plugin: [ htmlPlugin ]

4.js压缩的plugin

如果安装的webpack版本为4以上，则自动压缩，不用安装以下插件

十一、本地服务器

1.配置webpack的自动打包功能

方式1：
1、运行npm install webpack-dev-server –save-dev命令
2、在webpack.config.js中，与plugins平级下添加如下代码：

devServer: { // 为哪个文件夹提供服务     contentBase: './dist', // 页面实时刷新  inline: true } 

3、在package.json文件，scripts中配置如下代码：
--open是表示自动打开浏览器
"dev": "webpack-dev-server --open"

方式2：
1.运行：npm install webpack-dev-server -D命令，安装自动打包工具
2.修改package.json→script中的dev命令:"build": "webpack-dev-server"
3.运行npm run build命令,重新打包
4.在index.html文件中，修改bundle.js的引入。修改为: “/bundle.js”
5.在浏览器中访问https://localhost:8080

2.自动打包效果如下

十二、webpack配置文件分离

使开发和发布依赖不同的配置文件

1、为了合并文件，需要安装npm install webpack-merge --save-dev
2、新建3个文件分别为，base.config.js(公共)、prod.config.js(开发依赖)、dev.config.js(发布依赖)
3、package.json中配置，修改打包入口dev为开发，build为发布

4、删掉以前根目录中的webpack.config.js文件
5、在三个文件中，分别写上代码如下：
base.config.js:

// 公共配置文件 const path = require('path') const VueLoaderPlugin = require('vue-loader/lib/plugin') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin') // const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象 //   template: './index.html',   // 指定要用到的模板文件 //   filename: 'index.html'  // 指定生成的文件名称，该文件存在内存中，在目录中不显示 // })  module.exports = {   entry: path.join(__dirname, './src/main.js'),   output: {     path: path.join(__dirname, '../dist'),     filename: 'bundle.js' // publicPath: 'dist/' },   module: {     rules: [ {         test: /.css$/,         use: ['style-loader', 'css-loader', 'postcss-loader'] }, {         test: /.less$/,         use: [{           loader: "style-loader" }, {           loader: "css-loader" }, {           loader: "less-loader" }] }, {         test: /.(png|jpg|gif)$/,         use: [ {             loader: 'url-loader', // 加载图片大小 小于limit，会将图片编译成base64字符串形式 // 如果图片大于limit，则需要安装file-loader             options: {               limit: 20,               name: 'img/[name].[hash:8].[ext]' } } ] }, {         test: /.js$/, // exclude排除         exclude: /(node_modules|bower_components)/,         use: {           loader: 'babel-loader',           options: { // 如果这样写，会自动去找babelrc文件 // presets: ['@babel/preset-env']             presets: ['es2015'] } } }, {         test: /.vue$/,         use: ['vue-loader'] } ] },   resolve: { // 后缀名可省略     extensions: ['.js', '.css', '.vue'], // alias别名     alias: { 'vue$': 'vue/dist/vue.esm.js' } },   plugins: [ new VueLoaderPlugin(), new webpack.BannerPlugin('最终版权归lvan所有'), new HtmlWebpackPlugin({ // 指定的模板，也就是根目录中的index文件       template: 'index.html' }) ] } 

prod.config.js:

// 开发模式，使用配置文件 const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin') const webpackMerge = require('webpack-merge') 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 } }) 

内容持续更新中…
lvan学习笔记-文章内容仅个人观点
2020.6.7