[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' ???}), ?]};

[vue]webpack3最佳实践篇

原文地址：https://www.cnblogs.com/iiiiiher/p/9499406.html