webpack的使用

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