webpack+vue起步

本文基于vue1.x

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

Vue2.x踩坑与总结
Webpack2.x踩坑与总结

记得第一次知道Vue.js是在勾三股四大大的微博，那时候他开始翻译vue的文档，从那时候开始到现在，看了几次vue的教程，每次都有更深的理解，因为之前并没有研究过angular等框架，所以对MVVM并不是很了解，但是经过这段时间对vuejs的一些研究，越来越懂了，这篇文章，只是对vuejs和webpack配合的非常基础的文章，我想随着我对vue的深入理解，会对组件化，模块化，MVVM有更深入的理解。

项目的创建

1.新建项目文件夹，并在其中建立package.json

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

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

<!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.js

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

url-loader

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

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

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

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，配置如下：

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命令建立：

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
            }
        ]
    ]
}
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/h2zZhou/p/7903207.html