码迷,mamicode.com
首页 > Web开发 > 详细

[vue]webpack3最佳实践篇

时间:2018-08-19 10:54:29      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:dev   分享图片   编译   导入   技术分享   可见   dex   命令   template   

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最佳实践篇

标签:dev   分享图片   编译   导入   技术分享   可见   dex   命令   template   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!