[vue]webpack3最佳实践篇

npm i webpack@3 -g //全局安装webpack

webpack手动使用

先创建个目录, npm初始化下

npm init -y

目录如下

然后webpack手动编译

webpack src/main.js dist/bundle.js

会自动生成dist目录和dist/bundle.js

可见webpack命令核心使命是编译.

配置webpack的配置文件,使得执行webpack更加便利
webpack.conf.js

let path = require('path');

module.exports = {
  entry: path.resolve('./src/main.js'), //输入
  output: {
    path: path.resolve('./dist'), //产出
    filename: 'bundle.js'
  }
};

自此执行webpack即可编译了

webpack 

webpack-dev-server实现自动编译

每次修改代码,无需在手动执行webpack了

npm i webpack-dev-server@2 --save-dev

1.自动打开浏览器
2.代码更新后热刷新

自动插入bundle.js

npm i html-webpack-plugin --save-dev

webpack.confg.js配置

let path = require('path');

//1.导入
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.resolve('./src/main.js'),
  output: {
    path: path.resolve('./dist'),
    filename: 'bundle.js'
  },
  //2.配置个模板
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
  ]
};