webpack4.0搭建vue教程

没有安装记得先安装webpack npm install webpack webpack-cli -D

老版本的打包方案是： webpack .\src\main.js .\dist\bundle.js
而在webpack4之后官方对 webpack-cli 单独抽离了出来
所以打包语句就变了 npx webpack a.js --output-filename b.js --output-path . --mode development
mode 表示生产还是开发模式
添加 mode: 'production' 在webpack.config.js 中(如果没有这个文件就自己创建一下了)

在根目录下新建文件 webpack.config.js
参考链接

module.exports = { // 打包文件入口 entry // 1. 单一条目语法可以简写 // 2. 传递数组(将多个依赖文件一起注入并将其依赖关系映射到一个“块”) // 3. 对象(“可扩展的webpack配置”是可以重用并与其他部分配置组合的配置) entry: path.join(__dirname,'./src/main.js'),  output:{// 输出文件相关配置 path: path.join(__dirname,'./dist'), filename:'bundle.js' }, mode: 'production' // 环境 }

根据入口文件,生成多个js文件
下面实例可以生成 app.bundle.js 和 print.bundle.js 文件

entry: { app: './src/index.js', print: './src/print.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }

当我们在控制台运行 webpack 命令执行时， webpack 做了下面过程

首先 webpack 命令没有指定入口、出口以及模式
webpack 就会在跟目录查找 webpack.config.js 配置文件
当找到配置文件， webpack 会解析这个配置文件. 然后就得到了配置文件中的配置对象
当 webpack 拿到了配置对象后，就知道了入口文件、出口文件、模式了。

如果我们更改了其中一个入口点的名称，或者甚至添加了新入口点，生成的包将在构建时重命名，但我们的index.html文件仍将引用旧名称。所以可以利用工具生成一个页面来引入这些文件

先导入插件 const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [ new HtmlWebpackPlugin({ template:"./src/index.html", // 根据 目标文件生成 html title: 'Output Management' }) ]

Webpack将生成文件并将它们放在/dist文件夹中，但它不会跟踪项目实际使用的文件。
通常，最好/dist在每次构建之前清理文件夹，以便仅生成使用过的文件。

安装插件 npm install --save-dev clean-webpack-plugin
配置 webpack.config.js 文件

const CleanWebpackPlugin = require('clean-webpack-plugin'); plugins: [ new CleanWebpackPlugin(['dist']), ],

当使用 webpack 打包源码时，很难跟踪错误和警告到其原始位置。例如:
将三个源文件（a.js，b.js和c.js）捆绑到一个bundle（bundle.js）中,
如果其中一个源文件出现错误，则堆栈跟踪将简单地指向bundle.js。

给 webpack.config.js 配置文件新增
devtool: 'inline-source-map'

在上面,我们已经习惯了

webpack 命令打包
或者在package.json中配置
(如果存在scripts添加就好了)

"scripts": { "start": "webpack" }

使用 npm run start 来进行打包
但每次都要打包显得有麻烦，我们可以自动编译代码

让我们添加一个npm脚本，它将启动webpack的Watch Mode：
在 package.json 配置文件中新增

"scripts": { "watch": "webpack --watch", }

之后执行 npm run watch 它不会退出命令行，当你重新编译文件后，他就会自动打包了

在安装 webpack-dev-server 之前确保安装 webpack 和 webpack-cli (全局安装不行)npm install webpack webpack-cli -D
注意 webpack-dev-server 生成的 bundle.js 文件是托管到内存上的，并不会写到物理磁盘上的。生成的 bundle.js 默认是在根路径下的

webpack-dev-server 提供了一个简单的Web服务器和使用实时重新加载的能力

使用命令 npm install webpack-dev-server 来进行安装webpack-dev-server

devServer: { // 配置 服务器 信息  contentBase: './dist', // 托管的目录 port: 3000, // 指定端口号 open: true, // 自动打开浏览器 },

"start": "webpack-dev-server --open --contentBase dist --port 3000"

"scripts": { "start": "webpack-dev-server --open", },

此时浏览器自动加载页面。如果更改任何源文件并保存它们，则在编译代码后，Web服务器将自动重新加载

它允许在运行时更新所有类型的模块，而无需完全刷新。（类似于tomcat服务器的debug模式）

修改 webpack.config.js 文件

引入
const webpack = require('webpack');

devServer: { contentBase: './dist', hot: true },

plugins: [ new webpack.HotModuleReplacementPlugin() s]

"start": "webpack-dev-server --hot"

他就是启动了一个服务器，将结果放到服务器上去
webpack-dev-middleware 是一个包装器，它将webpack处理的文件发送到服务器

因为 webpack-dev-middleware 依赖于 express框架
使用 npm install --save-dev express webpack-dev-middleware 命令

output: { publicPath: '/' }

publicPath运行在服务器中提供文件http://localhost:3000

const express = require('express'); const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware');  const app = express(); const config = require('./webpack.config.js'); const compiler = webpack(config);  // 告诉 express 使用 webpack-dev-middleware 和 webpack.config.js app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath }));  // 服务器启动端口 app.listen(3000, function () { console.log('请访问： http://127.0.0.1:3000\n'); });

在package.json文件中新增：

"scripts": { "server": "node server.js", }

安装和添加风格装载机和 CSS-装载
使用 npm install --save-dev style-loader css-loader
webpack.config.js 文件中添加

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

配置文件：

rules: [{ test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] }]

配置文件:

rules: [{ test: /\.scss$/, use: ['style-loader', 'css-loader','sass-loader'] }]

webpack使用正则表达式来确定它应该查找哪些文件并将其提供给特定的加载器。在这种情况下，任何以...结尾的文件.css都将被提供给style-loader和css-loader。

使用 url加载器或文件加载器

file-loader 和 url-loader 的关系:
简单说url-loader封装了file-loader，但url-loader不依赖于file-loader。
url的工作情况分两种情况：
1.文件大小小于limit参数，url-loader将会把文件转为DataURL(base64码)
2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给>file-loader。因此我们只需要安装url-loader即可

npm install --save-dev url-loader
webpack.config.js 配置文件新增图片匹配规则

module: { rules: [ { test: /\.(png|svg|jpg|gif)$/, use: ['url-loader'] } ] },

文件和URL加载器将获取你通过它们加载的任何文件，并将其输出到构建目录。这意味着我们可以将它们用于任何类型的文件，包括字体

如果图片安装文件加载器就需要在安装了直接配置 npm install --save-dev file-loader
webpack.config.js 配置文件新增字体匹配规则

module: { rules: [ { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['url-loader'] } ] },

npm install --save-dev csv-loader xml-loader
配webpack.config.js 配置文件新增数据类型文件匹配规则

{ test: /\.(csv|tsv)$/, use: [ 'csv-loader' ] }, { test: /\.xml$/, use: [ 'xml-loader' ] }

这样就可以import将这四种类型的数据中的任何一种（JSON，CSV，TSV，XML）导入使用了

加载 Babel 包，用来将 webpack 处理不的 ES6或ES7 语法转换为低级语法

npm install babel-core babel-loader babel-preset-env -D
webpack.config.js 添加处理规则

// 使用babel-loader在webpack打包时处理js文件 { test: /\.js$/, loader: 'babel-loader', include: [path.resolve(__dirname, 'src')] // src目录下的js文件 }

babel 配置

在项目根目录下新建 .babelrc 文件

{ "presets": ["env"] }

如果想要使用草案阶段ES 的语法规则记得就是用下面的转换规则和配置了

添加es7草案阶段的提案stage-2

4.1 安装 npm i babel-preset-stage-2 -D
4.2 修改 .babelrc 配置文件

{ "presets": [ ["env", { "targets": { "browsers": ["> 1%", "last 2versions", "not ie <= 8"] } }], "stage-2" ] }

以上配置表示使用babel-preset-env编译js，且浏览器环境为： 1、全球市场份额大于1%的浏览器 2、最后2个版本的浏览器 3、大于IE8版本的IE浏览器 然后再使用babel-preset-stage-2插件编译尚处在草案阶段的语法

babel-preset-loader、babel-preset-env、babel-preset-core这3个插件就能满足使用webpack打包js文件时先通过babel编译js为es5的代码
babel-preset-stage-2插件可以处理草案阶段的ECMASCRIPT语法
- - - - - - -

npm install --save-dev babel-core babel-loader babel-plugin-transform-runtime
npm install --save-dev babel-preset-env babel-preset-stage-0
webpack.config.js 添加处理规则、

{ test: /\.js$/, use: [ 'babel-loader' ], exclude:/node_modules/ // 不处理这个包下的文件 }

在根目录创建 .babelrc 的 Babel 的配置文件。这个配置文件是json格式。
{
"presets":["env","stage-0"],
"plugins":["transform-runtime"]
}

Babel的配置文件是 .babelrc，存放在项目的根目录下.
该文件用来设置转码规则和插件，基本格式如下：

{ "presets": [], "plugins": [] }

或者在 package.json 使用

"babel":{ "presets": [], // 配置语法规则 "plugins": [] // 配置插件 }

此时你应该明白他们之间的关系了。所以 .babelrc 是遵循json语法格式的

presets: 表示转码规则
建议安装 npm install babel-presets-env -D
注意：在使用ES7语法规则时候就要添加

babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3
babel-preset-stage-4
中的一个就可以了。使用方法见上面

plugins：转码插件

npm 安装时，可能会有一个 baabel-core 和 babel-loader 不匹配的现象。
此时，根据提示更换 baabel-core 或者 babel-loader 版本即可了。

npm install vue -S
安装 .vue模板文件的加载器
npm install vue-loader vue-template-compiler -D
webpack.config.js 文件新增

const VueLoaderPlugin = require('vue-loader/lib/plugin'); plugins: [ // 配置插件的节点 new VueLoaderPlugin(), ], { test:/\.vue$/, use:['vue-loader'] }

使用 render 函数来渲染组件。

render:c=>c(组件名称)

其实这个并不常用。。也不需要配置

在 webpack.config.js 文件中配置
resolve:{ alias:{ "vue$": "vue/dist/vue.js" } }
使用 import Vue from '../node_modules/vue/dist/vue.js'

npm install mint-ui -D

引入全部组件

import Mint from 'mint-ui'; Vue.use(Mint); import 'mint-ui/lib/style.css';

按需要导入

import { Header } from 'mint-ui'; import 'mint-ui/lib/header/style.css'; Vue.component(Header.name, Header);

这时候就会发现需要单独导入css文件，有些繁琐

安装 npm install babel-plugin-component -D
.babelrc 配置

"plugins": [["component", [ { "libraryName": "mint-ui", "style": true } ]]]

可能编译器会有一些提示。不要在意就好了

npm install vue-router -D 下载路由
导入路由模块, 并且注册路由

import VueRouter from 'vue-router' Vue.use(VueRouter);

创建路由对象

var router = new VueRouter({ routes:[ // 路由匹配规则 { path:'/home', component: HomeContainer}, ] })

将路由挂载到实例对象上

var vm = new Vue({ el:"#app", router, // 挂载 路由 });

当然可以把路由模块抽离出去，封装起来 (建议这样做)

安装 npm i vue-resourse -D
导入 vue-resourse 并全局注册

import VueResourse from 'vue-resourse' Vue.use(VueResourse);

使用下面方式去获取数据，注意返回的是一个 promise 对象。
get:

this.$http.get("url").then(function(result){ // auto });

post:

Axios 是一个基于 promise 的 HTTP 库

安装 npm install axios vue-axios -D
然后引用并使用模块

import Axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,Axios)

在模块内的使用方式
this.$httpmethod
使用实例

4.1 get：

axios.get('url').then(function(response){}) axios.get('url',{ params:{ id:12345, 　　 name:'ay' } }).then((response)=>{ console.log(response) }) axios.get('url?id=12345&name=ay').then(function(response){})

4.2 post:

axios.post('index.php',{ id:12345, name:'ay' }).then((response)=>{ console.log(response) })

4.3 并发请求

function getUrl1() { return axios.get('url1'); } function getUrl2() { return axios.get('url2'); } axios.all([getUrl1(), getUrl2()]) .then(axios.spread(function (acct, perms) { // acct为第一个请求的结果，perms为第二个请求的结果 }));