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

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"
}

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

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

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

{ "presets":["es2015"] }

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

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

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

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

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

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

rules:[

{test:/\.(jpg|png|gif)$/,use:'url-loader"color: #ff0000">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初学者可以动手试试。当然，文章可能会有我疏忽的地方，有问题随时联系我呀~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。