实战vue的webpack配置方法

可参考链接：https://www.cnblogs.com/yanxulan/p/8978732.html

1.初始化

命令：npm init --yes

2.安装webpack

安装对应版本的webpack

命令：npm i webpack@3.12.0 -d

或者直接安装最新webpack

命令：npm i webpack

3.建立初始化文件

• 1. index.html —— 第一个html
• 2. main.js —— 项目的入口
• 3. index.html 里面需要script引入最后打包生成的文件
• 4. 在main.js里面引入vue，需要modual对应的vue文件，同时需要new一个对象 app
• 5. 新建一个App文件，就是入口的组件，同时抛出对象，就可以在main中引入
• 6. 这样main和App就是相关联的，就使用webpack打包，最后index就直接引入打包以后的文件

4.webpack命令打包

命令：webpack ./main.js build.js

5.配置webpack

• 1）在package.json里面配置script

  "bulid":"webpack ./main.js ./build.js"

• 2. 修改配置以后使用命令：npm run build

6.webpack的config的配置

• 1）建立webpack.config.js文件配置，去管理文件

var path = require('path')

module.exports = {
  entry: path.join(__dirname, './src/main.js'), 
  output: { 
    path: path.join(__dirname, './dist'), 
    filename: 'bundle.js' 
  }
   watch:ture // 可以监听代码的改变
}

• 2）添加watch属性

这样，使用命令webpack就可以自动打包

7.生成环境和开发环境配置

• 1）建立生产环境和开发环境的config文件

  webpack.dev.config.js

  webpack.prod.config.js

• 2. 在webpack.config.js里面配置对应的内容

"script": {
    "dev":"webpack --config ./webpack.dev.config.js",
    "prod":"webpack --config ./webpack.prod.config.js"
}

开发的命令：npm run dev

生成命令：npm run prod

8.配置css的loader

• 1）安装命令：npm i css-loader style-loader -d
• 2）在webpakc.config.js中去配置