webpack搭建vue项目，实现脚手架功能

本文基于node.js开发环境，安装完node以后新建项目，经过webpack配置，实现vue-cli脚手架功能

对于刚刚接触编程的人来讲，最难的可能并非学习一种新语法或者框架，而是编程思惟，这种思惟在调试的时候显得尤其重要，拥有良好的编程习惯和思惟能力能够大幅度提升调试效率。而编程思惟的培养每每须要经验的积累，只有把底层原理一遍遍地思考以后，才会有更深刻的理解，这也是vue官方文档中不建议vue初学者直接使用vue-cli的缘由之一。

因此今天特地一步步经过webpack配置，实现与vue-cli相同的效果，但愿你们能有所收获。

1. 建立一个vue项目

使用命令行mkdir vuedeom 或者直接新建一个vuedemo空文件夹，而后命令行cd vuedemo，使用npm init -y初始化，此时你会看到文件夹多了一个package.json的文件，内容大体以下：

{
  "name": "vuedemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2. 引入webpack

经过npm加载webpack，固然若是速度慢的话你也可使用淘宝镜像，npm install -g cnpm –registry=https://registry.npm.taobao.org，而后输入命令：cnpm install webpack --save-dev

接下来咱们在项目根目录建立一个src文件，有一个main.js，再建立一个webpack.config.js，最后修改package.json的脚本：

const path = require('path')   //引入node内置模块path
module.exports ={
    entry:'./src/main.js',      // 入口文件，把src下的main.js编译到出口文件
    output:{                   //出口文件
        path:path.resolve(__dirname,'dist'),   //出口路径和目录
        filename:"demo.js"                     //编译后的名称
    }
}

 

//package.json
{
  "name": "vuedemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build":"webpack"  //当使用npm run build的时候就会执行webpack，按照提示安装webpack-cli
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3. babel编译

虽然ES6语法已经普遍普及，但各个浏览器还不是特别兼容，为了不出错咱们须要把ES6转成ES5，使用babel进行编译

npm install  --save-dev babel-core babel-loader

加载完成以后，在webpack.config.js配置

const path = require('path')

module.exports ={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"demo.js"
    },
    module:{
        rules:[   //遍历规则
            {
                test: /\.js$/,  //匹配以js结尾的文件
                loader:"babel-loader", // 使用babel-loader编译
                exclude: /node_modules/  //node_module里面的内容不遍历
            }
        ]
    }
}

 我测试的时候出现了这样的错误，若是有相同状况的能够参考下：

Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

这是由于版本之间的不兼容，按照上面的要求，你能够安装低版本的babel-loader@7

也有可能webpack会发出这样的警告：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

你须要给脚本配置一个环境，通常build咱们会用生产环境webpack --mode production，而dev会使用生产环境webpack --mode development （这个下面会讲）

另外，有时候咱们可能会遇到不能识别webpack命令，缘由未知，不太重新安装一次就能够了...

接下来须要让babel-loader翻译官具备翻译的功能：

npm install babel-preset-es2015 --save-dev

 而且新建一个.babelrc的文件，里面新建

{ "presets":["es2015"] }

若是须要转译ES7语法，你还须要安装

npm install babel-preset-stage-0 --save-dev

一样在.babelrc添加

{ 

"presets":["es2015"."stage-0"]

}

每次修改配置以后都要从新编译：npm run build

4. 解析样式

上面咱们实现了vue引入和es6以及es7语法转译，如今咱们来解析样式，须要安装两个包

npm install css-loader style-loader --save-dev

css-loader将css解析成模块，style-loader将解析的内容插入到style标签内

别忘了在配置里webpack.config.json添加规则

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

可是大多数时候，咱们在vue中会使用样式预处理语言，好比sass、less、stylus，一样地咱们须要安装对应的包，添加对应的规则

npm install less less-loader --save-dev

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

5. 解析图片

图片是大多数项目不可获取的部分，怎样解析图片呢？和解析样式步骤差很少，咱们须要先安装包再添加规则

npm install file-loader url-loader --save-dev

rules:[

{test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'},

{test:/\.(eot|svg|woff|woff2|wtf)$/,use:'url-loader'}

]

limit表示转化base64只在8192字节一下转化，其余状况输出图片

6. 解析html

咱们但愿build以后能有一个html文件，能直接看到编译以后的效果

这时就须要一个插件，插件的做用是以咱们本身的html为模板将打包后的结果，自动引入到html中产出到dist目录下

npm install html-webpack-plugin --save-dev

在webpack.config.js引入这个插件

let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    ....省略
    plugins:[new HtmlWebpackPlugin({  //自动插入到dist目录中
        template:'./index.html'    //使用模板
        filename:'login.html'         //产出名称(通常不写)
    })]
}

build以后你就能够看到dis下有一个index.html文件

 7. 开发环境

一个项目建立分为开发环境和生产环境（上线），那么在开发的时候每次都须要build很不方便，并且build以后至关于最终的代码，不能随意更改，咱们须要把这些内容都放到内存中，经过npm run dev打开

npm install webpack-dev-server --save-dev

这里边内置了服务，能够帮咱们启动一个端口号，当代码更新时，自动在内存中打包，代码有变化就从新执行

而且在package.json添加一个新脚本："dev":"webpack-dev-server --mode development"

通常webpack-dev-server会内置一个端口，经过这个端口就能查看编译的内容了，好比个人端口号：http://localhost:8080

8. 配置vue

上面咱们已经实现了基本的webpack配置，完成了html、css、less、图片、js等文件的解析，但咱们最终想要的适合vue-cli同样的效果，这就要求咱们还要对vue语法进行解析，若是你在main.js引入vue模块，使用vue时，你会发现控制台打印这样的错误

vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

这是由于默认的vue引用的是vue.runtime.common.js，不能编译模板，你能够在引入vue的时候直接import Vue from 'vue/dist/vue'

另一种办法是，你可使用render函数，注意render()要有返回值

可是不论是改变vue引用js仍是使用render函数都是不方便的，咱们更但愿页面组件能以.vue文件加载到html文件中

咱们能够经过安装vue-loader（解析.vue文件）和vue-template-compiler（解析template模板）实现

npm install vue-loader vue-template-compiler --save-dev

以后咱们在main.js引入App.vue模块，而后在render()引用：render:(h)=>h(App)

最后

到这里咱们就实现了和vue-cli初始化出来的vue项目同样的效果，其实整个过程并不算太难，不过一步步实现仍是颇有帮助，vue初学者能够动手试试。固然，文章可能会有我疏忽的地方，有问题随时联系我呀~