webpack中的一些基本操作（VUE）

1.全局安裝webpack

npm i webpack -g

2.在開發的文件下初始化

npm init -y

3 安裝webpack-dev-server

npm i webpack-dev-server -D

4 在跟目錄創建文件 webpack.config.js
裏面編寫

 var path = require("path");
 module.exports = {
 	entry: './src/main.js',
 	output: {
 		filename: 'bundel.js',
 		path: path.resolve(__dirname, 'dist')
 	}
 }

5 在package.json裏面配置

{
  "name": "vueatudy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --hot --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.2"
  }
}

6.html-webpack-plugin的配置

npm i html-webpack-plugin -D
同時在webpack.config.js裏面添加

 var path = require("path");
var htmlwebpackplugin=require('html-webpack-plugin')
 
 module.exports = {
 	entry: './src/main.js',
 	output: {
 		filename: 'bundel.js',
 		path: path.resolve(__dirname, 'dist')
 	},
 	plugins:[
		new htmlwebpackplugin({
			template:path.join(__dirname,'./src/index.html'),
			filename:'index.html'
		})
	],
 }

ok 接下來就是關於 lorder 的一些配置 比較簡單