1.什么是webpack

webpack是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。 Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能。要使用 Webpack 前须先安装 Node.js。

2.创建一个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"
}

3.引入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"
}

4.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里面的内容不遍历
            
        ]
    }
}

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语法进行解析

我们可以通过安装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)

使用webpack创建vue项目