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 里面编写

代码语言：javascript复制

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

5 在package.json里面配置

代码语言：javascript复制

{
  "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里面添加

代码语言：javascript复制

 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 的一些配置 比较简单

html webpack path 开发 配置

0 人点赞