vue超详细讲解二(webpack)

文章目录

node npm webpack的使用安装 作用 下载 使用过程 webpack简便用法 使用node运行webpack命令 webpack的loader webpack打包css文件 webpack打包less文件 webpack打包图片 webpack打包后的文件转成es5的 webpack打包vue 创建Vue时template与el的关系 创建Vue的终极使用方案 第一种方案 第二种方案 第三种方案 webpack的plugin(插件) 添加版权的plugin 打包生成html文件的plugin 压缩js的plugin webpack其他知识 webpack-dev-server搭建本地服务器 webpack配置文件的分离

官网
vue超详细讲解(一)

node

Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境。
作为一个异步事件驱动的 JavaScript 运行时,Node.js 被设计用来构建可扩展的网络应用。

npm

npm init

这条指令是用来初始化项目的,运行-一通回车之后项目会生成package.json文件,该文件中放了项目的相关信息。例如项目名称、版本号、脚本、作者以及依赖的包。

npm install

该命令是用来下载npm所管理的包的,如果指令或项目没有指定下什么包就不会下载,不管有没有下载都会在项目中生成一个package-lock.json文件,其中存放着项目导包的相关信息。

在项目开发中,我们一般在创建项目后使用这两条指令,用于初始化项目。

webpack的使用安装

作用

从本质上来讲,webpack是一个现代的JavaScript应用的静态模块打包工具。
他是帮助我们打包前端项目的。

下载

安装webpack首先需要安装Node.js,Node.js自带了软件包管理工具npm,没有的去官网下载一下 查看自己的node版本:
node -v
全局安装webpack(这里我先指定版本号3.6.0,因为vue cli2依赖该版本)
npm install webpack@3.6.0 -g
局部安装webpack(后续才需要) save-dev 是开发是依赖,项目打包后不需要继续使用的。
cd 对应目录
npm install webpack@3.6.0 --asve-dev

使用过程

调用命令: webpack 需要打包的js文件路径 打包之后的js文件路径

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

如果你报了一下错误,请点这里解决问题

webpack : 无法加载文件 C:\Users\AppData\Roaming\npm\webpack.ps1,因为在此系统上禁止运行脚本

调用命令后webpack会帮你除了各种模块之间的依赖,在html页面中只需导入打包后的js文件即可

webpack简便用法

我们在使用webpack时打包就需要敲一下代码,很麻烦
webpack ./src/main.js ./dist/bundle.js
在项目中创建webpack.config.js文件,webpack会扫描该包。
在这个文件中我们可以制定webpack把哪个文件打包到哪个文件中。

 const path = require("path")//node中的对象
 module.exports = {
  entry: "./src/main.js", //要打包的js文件
  output: {
  //打包生成文件的路径
    path : path.resolve(__dirname, "dist"), //__dirname为node中的全局变量,直接用就行,path的resolve方法可以帮助我们连接字符串
    //打包生成文件名
    filename: "bundle.js"
  }
 }

使用node运行webpack命令

我们之前说过:package.json文件中存放着脚本。
我们可以在packag.json文件中写入脚本,通过运行脚本来运行webpack,执行打包操作
在这里插入图片描述
在终端中通过 npm run 脚本名的方式来打包,使用这种方法会优先本项目的webpack。

npm run build

局部安装webpack并设置为开发版,运行版不使用

npm install webpack@3.6.0 --save-dev

webpack的loader

webpack打包css文件

webpack可以帮我们将css文件像js文件那样打包到一个js文件中,非~~~常好用。
css-loader是帮我们解析css文件的,style-loader是帮我们把样式渲染到页面上的。

    使用npm下载css-loader以及style-loader:如果版本不兼容请看这里 在主js文件中引入需要使用的css文件
require("./css/normal.css")

3.把以下代码放到webpack.config.js中

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

完整代码

 const path = require("path")
 module.exports = {
  entry: "./src/main.js",
  output: {
    path : path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
     rules: [
       {
         test: /\.css$/i,
         use: ["style-loader", "css-loader"],
       },
     ],
   },
 }

webpack打包less文件

和打包css文件相同,同样是三部:

    下载less-loader和less :
    npm install less less-loader --save-dev 引入写好的less
    require("./css/special.less") 编写配置文件
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
    ],
  },
};

webpack打包图片

在css、js中我们可能会使用图片,css-loader是处理不了图片的。我们需要下载file-loader以及url-loader才行

    下载
    npm install url-loader --save-dev
    npm install file-loader --save-dev 配置
module.exports = {
  module: {
    rules: [
      {
      	test: /\.(png|jpg|gif|jpeg)$/i,
         use: [
           {
             loader: 'url-loader',
             options: {
               //当图片大小小于limit(KB)时,url-loader会将图片转为base64存到js中
               //当图片大小大于limit(KB)时,图片需要file-loader处理,存到打包的那个文件夹中
               limit: 8192,
               //指定生成图片文件的名称即路径:image为文件夹,[name]为原本文件的名称,[hash:8]为8位hash值,[ext]为扩展名
               name: 'image/[name]-[hash:8].[ext]'
             },
           },
         ],
      },
    ],
  },
};

生成后的图片
在这里插入图片描述

webpack打包后的文件转成es5的

    下载loader
    npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 配置
{
 test: /\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      //转es5
      presets: ['es2015']
    }
  }
}

配置完之后再打包你就会发现生成的js文件使用的是es5的语法,搜const根本搜不到

在这里插入图片描述

webpack打包vue

    首先要使用npm安装vue
    npm install vue --save 在js文件中导入vue
    import Vue from 'vue'; 配置webpack.config.js,使用开发时vue,而不是运行时vue
 module.exports = {
  resolve: {
    //alias: 别名
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
 }

默认使用的vue是rutime-only,上面的配置是为了把他修改成runtime-compiler
在这里插入图片描述

创建Vue时template与el的关系

在创建vue时,我们需要在挂载的元素内写我们需要的标签,其实也可以在创建vue对象时赋予template属性,在template中添加页面内容。vue会帮我们吧template中的内容替换我们挂载的元素

挂载的元素
<div >
</div>
创建vue
const app = new Vue({
  el: "#app",
  template: `
    <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">点我</button>
    </div>
  `,
  data: {
    message: "hello webpack"
  },
  methods: {
    btnClick(){
      console.log("我被点击了");
    }
  }
})

创建Vue的终极使用方案

第一种方案

其实我们可以把根组件也封装成一个组件,然后使用该组件即可

html
<div >
</div>
js
const App = {
  template: `    <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">点我</button>
    </div>`,
  data(){
    return {
      message: "hello webpack"
    }
  },
  methods: {
    btnClick(){
      console.log("我被点击了");
    }
  }
}
new Vue({
  el: "#app",
  template: '<App/>',
  components : {
    App
  }
})

第二种方案

我们使用模块化的思想,把我们刚刚封装好的组件分离出来,创建一个js文件,使用的时候引用该文件

js文件
const app = {
  template: `    <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">点我</button>
    </div>`,
  data(){
    return {
      message: "hello webpack"
    }
  },
  methods: {
    btnClick(){
      console.log("我被点击了");
    }
  }
}
//导出vue组件
export default app
引入并使用该组件
import App from "./js/app.js"
new Vue({
  el: "#app",
  template: '<App/>',
  components : {
    App
  }
})

第三种方案

使用.vue文件独立封装组件,该文件也是需要引入的
由于该文件不能被webpack打包,我们需要下载新的loader,并且配置参数,配置在下面
npm install vue-loader@13.0.0 vue-template-compiler@2.5.21 --save-dev
vue-loader是打包.vue文件的,vue-template-compiler是用于组件编译的
vue-loader建议使用13的版本

app.vue文件
<template>
  <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">点我</button>
  </div>
</template>

<script>
export default {
  name: "app",
  data(){
    return {
      message: "hello webpack"
    }
  },
  methods: {
    btnClick(){
      console.log("我被点击了");
    }
  }
}
</script>

<style scoped>

</style>
引用并使用
import App from './js/app.vue'
new Vue({
  el: "#app",
  template: '<App/>',
  components : {
    App
  }
})
配置webpack.config.js
{
  test: /\.vue$/,
  use: ["vue-loader"]
}
resolve: {
	//配置该属性时,我们在引用文件时可以不用写后缀名
    extensions: ['.js', '.css', '.vue'],
    //alias: 别名
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

webpack的plugin(插件)

在这里插入图片描述

添加版权的plugin

按照下面的方式来修改webpack.config.js文件

const path = require("path")
const webpack = require("webpack")
module.exports = {
	...
	plugins: [
		new webpack.BannerPlugin('最终版权归bianys所有')
	] 
}

重新打包程序:查看bundle.js文件的头部,看到如下信息

在这里插入图片描述

打包生成html文件的plugin

该插件会在webpack打包时会在打包文件自动生成index.html文件,非常好用
该插件不是webpack自带的,需要自己下载

npm install html-webpack-plugin --save-dev

按照下面的方式来修改webpack.config.js文件

const path = require("path")
const webpack = require("webpack")
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
	...
	plugins: [
		new webpack.BannerPlugin('最终版权归bianys所有'),
		new htmlWebpackPlugin({})
	] 
}

生成的html文件是没有<div id = "app"></div>
我们需要给他指定一个模板,就用我们之前的index.html就行,这样配置

plugins: [
	new webpack.BannerPlugin('最终版权归bianys所有'),
	new htmlWebpackPlugin({
      template: 'index.html'
    })
]
生成之后的文件
在这里插入图片描述

压缩js的plugin

我们生成的js注释是比较多的,这样方便程序员查看,但在项目运行时注释和一些格式会影响代码的执行效率,因此我们需要压缩一下js代码。
下载第三方插件
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
按照下面的方式来修改webpack.config.js文件

const path = require("path")
const webpack = require("webpack")
const htmlWebpackPlugin = require('html-webpack-plugin')
const uglifyjsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
	...
	plugins: [
		new uglifyjsPlugin()
	] 
}
我们可以看到压缩后的js文件
在这里插入图片描述

webpack其他知识

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

我们在开发/调试时,需要频繁的打包代码,而打包代码的运行是需要很多时间的,这降低了开发区效率。
我们可以让node帮我的提供一个服务器,它会自动检测代码的变化从而自动在内存中打包,当我们调试完代码之后再打包,这样提高了开发效率。

    下载webpack-dev-server工具

npm install --save-dev webpack-dev-server@2.9.1
2. 在webpack.config.js中配置相关参数

 module.exports = {
  ...
  devServer: {
    contentBase: './dist',
    inline: true,
    port: 8083
  }
 }

在这里插入图片描述

启动需要用到webpack-dev-server指令,由于我们只在本项目中下载了该组件,在全局并没有下载,因此我们只能借助npm帮我们启动

    在package.json中修改以下代码
  "scripts": {
  	...
    "dev": "webpack-dev-server --open"//添加open是为了让他运行时自动打开网页
  },
    启动
    npm run dev

我们可以看到修改代码后,项目会自动更新。

webpack配置文件的分离

我们在压缩js和搭建本地服务器的时候就会发现压缩js在开发时根本不需要,搭建服务器也只是生产环境才会使用,我们可以编写两套webpack.config.js文件分别适配开发和生产环境。

    创建一下目录
    base里写公共的配置,dev里写开发配置,prod里写生产配置
    在这里插入图片描述 下载webpack-merge用于结合两个配置
    npm install --save-dev webpack-merge 在dev与prod中都引用base.config.js
      dev
    const webpack = require("webpack")
    //引用webpackMerge
    const webpackMerge = require("webpack-merge")
    const baseConfigJs = require("./base.config")
    //使用webpackMerge结合base与dev的配置
    module.exports = webpackMerge.merge(baseConfigJs, {
      plugins: [
        new webpack.BannerPlugin('最终版权归bianys所有'),
      ],
      devServer: {
        contentBase: './dist',
        inline: true,
      }
    })
    
      prod
    const webpackMerge = require("webpack-merge")
    const baseConfigJs = require("./base.config")
    const uglifyjsPlugin = require('uglifyjs-webpack-plugin')
    module.exports = webpackMerge.merge(baseConfigJs, {
      plugins: [
        new uglifyjsPlugin()
      ],
    })
    

之前webpack都是默认在根目录下找webpack.config文件,现在我们用三个文件替换了他,因此他就不需要了,我们需要指定我们使用的配置文件,也就是build文件架下的dev.config.js与prod.config.js

    修改package.json文件
{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },

由于我们修改了配置文件件的位置,那么打包文件生成的位置也会改变,我们如果还想让他在原来的位置生成就需要修改。
把"./dist"改为"…/dist"

    修改打包文件生成位置
    在这里插入图片描述 运行/打包项目
#dev
npm run dev
#prod
npm run build
来源url
栏目