1、前言

做过一些vue项目，但是每次都是使用官方提供的脚手架来构建，发现里面有好多是我们项目用不到的东西，因此想自己搭建一个，看了许多相关的资料，也借鉴了很多大佬的经验，想把自己的心得分享给大家。

2、webpack篇章

为了更好的搭建项目，和对webpack有一个更好的理解，特意又重新学了一下webpack，以便再以后的构建中更得心应手。

参数：

首先我们先来看一下他的参数有哪些

1、entry 入口文件

entry可以是个对象，可以是一个数组，也可以是个字符串。
当他是一个字符串的时候，可以用来定义入口文件;
entry: './js/main.js'
当他是一个数组的时候，里面包含一个入口文件，另外一个参数可以是用来配置webpack提供的一个静态资源服务器，webpack-dev-server。webpack-dev-server会监控项目中每一个文件的变化，实时的进行构建，并且自动刷新页面（通常我们写在配置的json文件里）：

entry: [
     'webpack/hot/only-dev-server',
     './js/app.js'
]

当entry是个对象的时候，我们可以将不同的文件构建成不同的文件，按需使用，比如在我的hello页面中只要\引入hello.js即可：

entry: {
     hello: './js/hello.js',
     form: './js/form.js'
 }

2、output 输出文件

output是一个对象，它定义了打包后，我们的文件名 和打包后的文件存储的路径 参数有两个 path fileName;
当我们想要打包成不同的文件的时候 我们可以这样定义output

var path = require("path");
module.exports = {
   entry: {
     hello: './js/hello.js',
     form: './js/form.js'
 },
    output:{
        path:path.resolve(__dirname,"./build"),
        filename:"[name].js"
    }
}

当我们只有一个入口文件 我们可以这样定义output

var path = require("path");
module.exports = {
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,"./build"),
        filename:'build.js'
    }
}

3、module 模块

这部分是我们所要加载的模块，用来解析我们那些无法用浏览器直接识别的一些文件，我们就定义在module.loaders中。这里通过正则表达式去匹配不同后缀的文件名，然后给它们定义不同的加载器。比如说给less文件定义串联的三个加载器（！用来定义级联关系 顺序错了会报错的奥）：

module: {
    loaders: [
        { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
        { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
        { test: /\.css$/, loader: "style!css" },
        { test: /\.less/, loader: 'style-loader!css-loader!less-loader'}
    ]
}

另外一种写法：

module:{
        rules:[
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            },
            {
                test: /\.less$/,
                use:[
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }
                ]
            }
        ]
    }

4.resolve 可以自动添加文件的后缀

webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀：

resolve:{
     extensions:['','.js','.json']
 }
//我们在引入文件时  就可以直接使用路径+文件名就可以直接找到我们要引用的文件，例如:
require(‘common’)

5、externals

当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码被构建到运行时文件中。此时我们就可以通过配置externals参数来解决这个问题：

 externals: {
     "jquery": "jQuery"
 }
//这样我们就可以直接使用 这个api了 例如：
var jQuery = require(“jquery”);

6、plugins 定义插件

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。plugins是一个数组，我们可以把我们的要使用的插件在里面注册要使用某个插件，当然我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例
添加版权声明的插件。

var webpack = require('webpack');
plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究')
    ]

版权所有，翻版必究

这样就在打包后的文件中出现了这个内容

7、devServer 本地服务器的相关配置

devserver的配置选项	功能描述
contentBase	默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
port	设置默认监听端口，如果省略，默认为”8080“
inline	设置为true，当源文件改变时会自动刷新页面
historyApiFallback	在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

想不想让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现监听代码的修改并且自动刷新修改后的结果，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖；
首先我们的下载 webpack-dev-server
cnpm install webpack-dev-server --save-dev
devserver作为webpack配置选项中的一项，以下是它的一些配置选项:

devserver的配置选项	功能描述
contentBase	默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
port	设置默认监听端口，如果省略，默认为”8080“
inline	设置为true，当源文件改变时会自动刷新页面
historyApiFallback	在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

devServer 配置例子：

devServer: {
        contentBase: "./build",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    }

在package.json中的scripts对象中添加如下命令，用以开启本地服务器：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  }

在终端中输入npm run server即可在本地的8080端口查看结果

8、devtool 配置source maps 方便我们开发时候调试

devtool选项	配置结果
source-map	在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；
cheap-module-source-map	在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
eval-source-map	使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；
cheap-module-eval-source-map	这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

正如上表所述，上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。

对小到中型的项目中，eval-source-map是一个很好的选项，再次强调你只应该开发阶段使用它，我们继续对上文新建的webpack.config.js，进行如下配置:

module.exports = {
    devtool: 'eval-source-map',
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,"./build"),
        filename:"bundle.js"
    }
}

3、webpack 搭建vue项目

1、搭建项目之前要做的准备

搭建一个项目我们首先要知道我都需要什么 要使用什么框架，要引入那些个loader等等。下面我们就以搭建vue项目作为例子来一起学习一下。

2、搭建过程

1.首先我们要安装node.js,方法就不在里说明了。
2.我们要创建一个工程文件并进去项目:

image.png
3.创建package.json文件 cnpm init (推荐是用淘宝镜像，下载的速度会快一些)中间一些选项直接enter 跳过就好
image.png
这时我们的项目是这样的
image.png
4.局部安装webpack
cnpm install webpack --save-dev
image.png
这时webpack已经安装成功
5.下载我们需要的一些文件
cnpm install vue vue-router css-loader@* vue-loader vue-template-compiler babel-core babel-loader es2015 file-loader less less-loader style-loader url-loader webpack-dev-server --save-dev
下载完成后的页面是这样的
image.png

在我门webstrom里面把这个node_modules的文件设置成如图这样，这个文件夹会很大，很容易造成卡死

image.png

6.所有的依赖我们都已经安装完毕，接下俩我们就开始配置我们的项目参数
我们先看一下这个项目的结构

image.png

(1).我们需要创建一个项目的基础页面index.html并引入我们打包后的js 我们起名叫bundle.js.

image.png
(2).创建一个入口文件 main.js 作为所有文件的入口，这里面我们实例化vue对象 注册路由，把对应的组件和文件引入到该页面
image.png
(3).router.js
image.png
(4.)App.vue
image.png
(5).我们写的一些组件例如:about.vue
image.png
(6).看到这的小伙伴已经有点不耐烦了，接下来重点来了，我们要创建一个webpack.config.js,配置上面我们所说的webpack的那些参数

var path = require("path");
// var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    mode:"development",//或者product || none  这三种都可以解决webpack-cli问题
    entry:"./src/main.js",
    output:{
        path:path.resolve(__dirname,"./build"),
        filename:"bundle.js"
    },
    module:{
        rules:[
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            },
            {
                test: /\.less$/,
                use:[
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }
                ]
            },
            {
                test:/(\.jpg|\.png|\.gif|\.jpeg)$/,
                loader:"file-loader"
            },
            {
                test:/\.vue$/,
                loader:"vue-loader"
            }
        ]
    },
    plugins: [
        // new webpack.ExtractTextPlugin("style.css")
    ],
    //构建本地服务器的相关配置 需要在`package.json`里面激活
    devServer: {
        contentBase: "./",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    }
}

(7).package.json

{
  "name": "vueproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    //激活本地服务器（注:`package.json`里面不能有注释，会报错）
    "server": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "css-loader": "^0.28.7",
    "es2015": "^0.0.0",
    "file-loader": "^1.1.5",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "vue": "^2.5.3",
    "vue-loader": "^13.3.0",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.3",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  }
}

到此为止 一个简单的vue项目搭建完成，面对项目不同的需求，我们可以下载不同的依赖包。有问题的地方欢迎大家指出，我们可以一起进步。