一.
新建好一个文件夹(比如ES6-demo)
打开文件夹,在文件夹中新建一个webpack.config.js
配置:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
entry:{
index:'./src/index.js'
},
output:{
path:__dirname + '/public',
filename:'./js/[name].js'
},
devServer:{
contentBase:'./public',
inline:true
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"es2015", "react"
]
}
},
exclude: /node_modules/
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'./index.html'
})
]
}
二.
在文件夹中打开终端,输入
npm init (安装了nodeJS才有npm命令)
初始化项目
各个配置信息可以先不填,最后输入y,
文件夹中会自动生成一个package.json
三.
在终端中输入
npm install webpack webpack-cli -S (或-D)
/*-D(用于开发环境)和-S(用于生产环境)
具体区别:https://www.cnblogs.com/cina33blogs/p/9210931.html)*/
安装好后会自动生成node_modules
四.
npm install html-webpack-plugin -S
npm install webpack-dev-server -S
npm install babel-core babel-loader babel-preset-env babel-preset-react -S
npm install babel-polyfill -S
全都安装完后新建一个目录src,在src中创建index.js和index.html
打开package.json,
在"scripts"{}中加入
"dev":"webpack-dev-server --open"
五.
在终端执行命令
webpack
1.若出现babel版本冲突,则执行
npm install -D babel-loader @babel/core @babel/preset-env webpack
并修改webpack.config.js配置为
presets: [
"@babel/env", "@babel/react"
]
再执行webpack命令
2.若成功执行webpack,则会自动生成一个public文件夹
六.
在终端输入
npm run dev
会成功打开浏览器并跳转到http://localhost:8080/
此时则配置成功