(webpack 4+)
安装node 、 npm
创建项目(app 文件夹)
进入app 文件夹
执行 npm init
这里一直回车就可以了
进去项目,新建src文件夹,创建index.js
安装webpack 慢的话可以使用淘宝镜像 --registry=https://registry.npm.taobao.org
npm install webpack webpack-cli --save-dev --registry=https://registry.npm.taobao.org
根目录创建webpack.dev.config.js
package.json 添加 “dev”: “webpack --config ./webpack.dev.config --mode development”
然后就可以执行命令npm run dev
安装 webpack-dev-server 、 html-webpack-plugin
npm install webpack-dev-server html-webpack-plugin --save-dev
创建index.html
webpack.dev.config 添加内容
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: __dirname,
filename: './relrease/bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html' //运行模板
})
],
devServer: {
contentBase: path.join(__dirname, './release'), //根目录
open: true, //自动打开浏览器
port: 9000 //端口
}
}
package.json 修改 “dev”: “webpack --config ./webpack.dev.config --mode development” 为
“dev”: “webpack-dev-server --config ./webpack.dev.config --mode development”
执行命令npm run dev 就可以启动了