webpack 首先下载webpack
npm install webpack@3.11.0 -g
webpack-cli :
使用命令 ：webpack 输入文件路径 打包后文件路径 将一个文件打包成另一个文件 例如 webpack ./app.js ./index.js 将浏览器不认识的文件打包成浏览器认识的文件 向require()一个路径 这种node语法浏览器不认识
webpack-config
1.配置webpack.config.js
2运行webpack
配置webpack.config.js 文件
var path = require('path')
module.exports={
//配置入口文件
entry:'./src/app.js',
//配置输出文件
output:{
//输出文件路径
path:path.join(__dirname,'dist'),
//输出文件的名字
filename:'bundle.js'
}
}
webpack-dev-server
自动更新而不是每次改变都要输入webpack
1.下载该包
运行：npm init -y\
npm i webpack-dev-server@2.9.7 webpack@3.11.0 -D
2 配置webpack.config.js文件
var path = require('path')
module.exports={
//配置入口文件
entry:'./src/app.js',
//配置输出文件
output:{
//输出文件路径
path:path.join(__dirname,'dist'),
//静态资源在服务器上运行时的访问路径可以直接http://localhost:8080/dist/bundle.js
publicPath:'/dist',
//输出文件的名字
filename:'bundle.js'
}
}
3修改index.html中的script改成该绝对路径
4配置script："dev": "webpack-dev-server --inline --hot --open --port 8090"
5npm run dev
