1.先装node,配置好环境变量
2.在终端进入空文件中 执行 npm init //自动创建package.json文件
3. 安装webpack npm install --save-dev webpack //局部安装webpack
4.手动配置 webpack.config.js文件
const webpack=require('webpack');
const HtmlWebpackPlugin=require('html-webpack-plugin'); //基本作用就是生成html文件
const OpenBrowserPlugin = require('open-browser-webpack-plugin') //自动打开浏览器
module.exports = {
//entry: __dirname + "/app/a.js",//唯一入口文
entry:{ //多入口文件配置
aA:__dirname + "/app/a1.js",
bB:__dirname + "/app/a2.js",
},
output: {
path: __dirname + "/public",//打包后的文件存放的地方
//filename: "dist.js"//打包后输出文件的文件名
filename: "[name].js"//打包后输出文件的文件名
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}]
},
devServer: {
inline:true,
port: 804
},
plugins:[
new webpack.optimize.UglifyJsPlugin(), //压缩js
new OpenBrowserPlugin({url:'http://localhost:804'}),
//new HtmlWebpackPlugin({template:'./pub/index.html'}),
new HtmlWebpackPlugin({filename:'index.html',title:'index',template:'./pub/index.html',chunks:['aA']}), //chunks包含的文件,在html中生成一个aA的入口文件
new HtmlWebpackPlugin({filename:'index2.html',title:'.index2',template:'./pub/index2.html',chunks:['bB']})
]
}
在package.json配置
"scripts": {
"cs": "webpack", //npm run cs 打包
"start": "webpack&&webpack-dev-server --hot --inline" //npm start 打开浏览器及文件变动刷新
github:https://github.com/RLflash/webpackDemo
如有不对的地方,请多多指教! ——RLflash