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 [email protected] -g
- 局部安装webpack(后续才需要)
- save-dev 是开发是依赖，项目打包后不需要继续使用的。
cd 对应目录
npm install [email protected] --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 [email protected] --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 id="app">
div>
- 创建vue
const app = new Vue({
el: "#app",
template: `
{
{message}}
`,
data: {
message: "hello webpack"
},
methods: {
btnClick(){
console.log("我被点击了");
}
}
})
创建Vue的终极使用方案
第一种方案
其实我们可以把根组件也封装成一个组件,然后使用该组件即可
- html
<div id="app">
div>
- js
const App = {
template: `
{
{message}}
`,
data(){
return {
message: "hello webpack"
}
},
methods: {
btnClick(){
console.log("我被点击了");
}
}
}
new Vue({
el: "#app",
template: '第二种方案
我们使用模块化的思想，把我们刚刚封装好的组件分离出来，创建一个js文件，使用的时候引用该文件
- js文件
const app = {
template: `
{
{message}}
`,
data(){
return {
message: "hello webpack"
}
},
methods: {
btnClick(){
console.log("我被点击了");
}
}
}
//导出vue组件
export default app
- 引入并使用该组件
import App from "./js/app.js"
new Vue({
el: "#app",
template: '第三种方案
使用.vue文件独立封装组件，该文件也是需要引入的
由于该文件不能被webpack打包，我们需要下载新的loader,并且配置参数,配置在下面
npm install [email protected] [email protected] --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: '- 配置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文件是没有
的
我们需要给他指定一个模板，就用我们之前的index.html就行，这样配置
plugins: [
new webpack.BannerPlugin('最终版权归bianys所有'),
new htmlWebpackPlugin({
template: 'index.html'
})
]
- 生成之后的文件
压缩js的plugin
我们生成的js注释是比较多的，这样方便程序员查看，但在项目运行时注释和一些格式会影响代码的执行效率，因此我们需要压缩一下js代码。
下载第三方插件
npm install [email protected] --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 [email protected]
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