webpack+vue起步

时间 2019-11-25

标签 webpack+vue webpack vue 起步繁體版

原文原文链接

本文基于`vue1.x`

基于`vue2.x&webpack2.x`请移步至

记得第一次知道Vue.js是在勾三股四大大的微博，那时候他开始翻译vue的文档，从那时候开始到如今，看了几回vue的教程，每次都有更深的理解，由于以前并无研究过angular等框架，因此对MVVM并非很了解，可是通过这段时间对vuejs的一些研究，愈来愈懂了，这篇文章，只是对vuejs和webpack配合的很是基础的文章，我想随着我对vue的深刻理解，会对组件化，模块化，MVVM有更深刻的理解。php

项目的建立

1.新建项目文件夹，并在其中创建package.jsoncss

$ mkdir [project name]
$ cd [project name]
$ npm init

2.在项目目录下新建index.htmlhtml

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue example</title> </head> <body> <div>{{message}}</div> <script src="dist/build.js"></script> </body> </html>

src文件夹，并在该文件夹下创建main.jsvue

import Vue from 'vue' new Vue({ el:'body', data:{ message:'test success!' } });

设置webpack

1.安装webpack，webpack-dev-server以及相关的loaders

# 全局安装webpack，webpack-dev-server $ npm install -g webpack $ npm install -g webpack-dev-server # 为项目安装其余依赖 $ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D

webpack-merge：开发环境和生产环节的webpaak配置文件的配置合并 
css-loader：编译写入css 
style-loader：把编译后的css整合进html 
file-loader：编译写入文件，默认状况下生成文件的文件名是文件名与MD5哈希值的组合 
vue：vue主程序 
vue-laoder：编译写入.vue文件 
vue-html-loader：编译vue的template部分 
vue-style-loader：编译vue的样式部分 
vue-hot-reload-api：webpack对vue实现热替换 
babel-core：ES2015编译核心 
babel-loader：编译写入ES2015文档 
babel-preset-es2015：ES2015语法 
babel-preset-stage-0：开启测试功能 
babel-runtime：babel执行环境 java

url-loader

这里介绍下url-loader，这个loader其实是对file-loader的封装https://github.com/webpack/url-loader
好比CSS文件中有时候会这么写：node

.demo{ background-image: url('a.png'); }

module:{ loaders:[ {test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'} ] }

通过以上配置，当a.png小于8K就会自动将图片转换成base64编码，若是不小于，则不会转换。
这里顺便提一句，在module配置的时候，loader的写法：webpack

module:{ loaders:[ {test:/\.jade$/,loader:'jade'} //这里配置了让webpack识别jade的loader，其余相似，好比.vue //用于css文件的loader有两种写法 {test:/\.css$/,loader:'style!css'} {test:/\.css$/,loaders:['style','css']} ] }

2.配置`webpack.config.js`

在根目录下创建webpack.config.js，配置以下：git

var path = require('path'); module.exports = { entry: './src/main.js', //定义webpack输出的文件，咱们在这里设置了 让打包后生成的文件放在dist文件夹下的build.js文件中 output: { path: './dist', publicPath:'dist/', filename: 'build.js' }, module: { loaders: [ //转化ES6语法 { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, //图片转化，小于8K自动转化为base64的编码 { test: /\.(png|jpg|gif)$/, loader:'url-loader?limit=8192' } ] }, //这里用于安装babel，若是在根目录下的.babelrc配置了，这里就不写了 babel: { presets: ['es2015','stage-0'], plugins: ['transform-runtime'] } }

特别说明
若是要在.babelrc下配置babel，则须要在根目录下新建该文件，windows环境下，不能新建该txt文件而后改后缀，须要经过dos命令创建：es6

echo>.babelrc

经过该命令就能够创建babelde配置文件，用编辑器打开，修改里面的内容为：

{
  "presets": ["es2015", "stage-0"], "plugins": ["transform-runtime"] }

完成该配置咱们在命令中运行

$ webpack

打开index.html就能够看到浏览器中看到咱们刚刚写的文字
至此咱们实现了最基本的利用webpack打包vue，下一篇将讲解如何利用webpack+vue真正实现组件化。

本地安装npm包后如何在命令行运行

在npm安装包的时候，若是使用全局安装，即npm install <packageName> -g，则在安装完成后能够在终端运行做为命令去运行，可是若是是本地安装的包npm install --save-dev <packageName>，则没法这样直接运行。那么如何运行本地安装的包呢？首先进入项目目录（即package.json所在目录），而后使用如下命令便可运行：

$ node_modules/.bin/<packageName>

除了能够这样在命令行运行外，还能够在文件中运行

//index.js let webpack = require('webpack'); webpack();

$ node index.js

webpack1.x升级2.x

1.`module.loaders`改为了`module.rules`

旧的loaders被新的rules取代，后者容许配置loader以及其余更多项。

module: { - loaders: [ + rules: [ { test: /\.css$/, - loaders: [ + use: [ { loader: "style-loader" }, { loader: "css-loader", - query: { + options: { modules: true } ] }, { test: /\.jsx$/, loader: "babel-loader", // Do not use "use" here options: { // ... } } ] }

以上写法中，Rule.loader是Rule.use: [ { loader } ]的简写。

2.链式调用loaders

在webpack1.x中loaders能够链式调用，在2.x中依旧有该特性，使用rule.use配置项，use中设置一个loaders的数组而在1.x中使用!链接各个loader，旧版写法只有在使用旧的module.loaders时有效。

module: { - loaders: { + rules: { test: /\.less$/, - loader: "style-loader!css-loader!less-loader" + use: [ + "style-loader", + "css-loader", + "less-loader" + ] } }

3.取消在模块中自动添加`-loader`后缀

webpack2.x中再也不添加-loader

module: { rules: [ { use: [ - "style", + "style-loader", - "css", + "css-loader", - "less", + "less-loader", ] } ] }

根据官方说法，作出这样更改的缘由是省略-loader会对新手形成误解，因此去掉这个功能，若是想打开这个旧的功能，能够配置resolveLoader.moduleExtensions，可是并不推荐这么作，具体参阅issues#2986

+ resolveLoader: {
+   moduleExtensions: ["-loader"] + }

4.使用options配置loader

在webpack1.x中能够经过webpack.config.js的自定义属性来配置loader，这在webpack2.x中没法执行

module.exports = { ... module: { use: [{ test: /\.tsx?$/, loader: 'ts-loader' }] }, // does not work with webpack 2 ts: { transpileOnly: false } } //webpack2 use options module.exports = { ... module: { use: [{ test: /\.tsx?$/, loader: 'ts-loader' options: { transpileOnly: false } }] } }

webpack插件的使用

webpack-dev-server1.x升级2.x

1.在CLI使用的时候，--inline默认开启，无需在输入命令时添加

2.删除contentBase用proxy代替

3.减小控制台无用输出，在1.x中，当咱们停掉服务器后，控制台会一直输出错误信息，可是在2.x中只会输出[WDS] Disconnected!

extract-text-webpack-plugin

在使用webpack将vue_spa打包后，并不会出现css，由于css被打包入build.js，若是从vue组件中抽离出css，须要安装插件extract-text-webpack-plugin，在使用的时候须要配合v2版本的才可使用（若是使用了webpack2，则对应的插件版本都须要用v2版本）。具体配置以下：

module:{ rules:[ { test: /\.vue$/, loader: 'vue', options: { loaders:{ css: extractTextPlugin.extract({ loader: 'css-loader', fallbackLoader: 'vue-style-loader' }) } } } ] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new extractTextPlugin({ filename:'/style.css', allChunks:true }) ],

在options中：

options.loader: string | object | loader[] (必填项) 这里的 loader(s) 用于将资源转换为css导出模块

options.fallbackLoader: string | object | loader[] 当css没有被导出的时候这里的 loader(s) 会被使用（即当在plugins模块中设置allChunks:false的时候）

在plugins中：

filename：能够设置被导出的css文件的路径以及名字

allChunks：从全部附加块中提取（默认状况下，它只从初始块中提取）

html-webpack-plugin

plugins: [
  new htmlWwebpackPlugin({ filename: 'assets/admin.html' }), ]

title：用于生成文档的document

filename：要注入的html文件，默认为index.html。能够自定义（例如：assets/admin.html）

inject：
true | ‘head’ | ‘body’ | false
将资源注入所给的template或templateContent，当设置为 true 或者 ‘body’，全部的资源会被注入到body底部。而head则会将js放到headelement

favicon: 在输出的html中添加favicon

hash: true | false 若是为true，则将一个惟一的webpack编译散列附加到全部包含的脚本和CSS文件。这对缓存清除颇有用。

cache: true | false 若是为true（默认），尝试仅在更改后才发出文件。

是否要更换preset？

webpack2.x默认支持es6的模块，因此在编译时候没有必要将它们先转换为CommonJS模块再处理，因此在github中出现了babel-preset-es2015-webpack，可是这个模块我在使用的时候出现了Cannot remove 'babel-plugin-transform-es2015-modules-commonjs' from the plugin list.的问题，根据babel-preset-es2015-webpack中的叙述以及issues#14可知，babel-preset-es2015已经支持不转换模块中的import和export，只须要设置.babelrc

{
    "presets": [ [ "es2015", { "modules": false } ] ] }