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 本地服务器的相关配置

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

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 方便我们开发时候调试

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

对小到中型的项目中，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

image.png

image.png

image.png

image.png

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

image.png

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

image.png

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

image.png

image.png

image.png

image.png

image.png

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项目搭建完成，面对项目不同的需求，我们可以下载不同的依赖包。有问题的地方欢迎大家指出，我们可以一起进步。