02_搭建环境(二)
接着上一文章
安装webpack-dev-server html-webpack-plugin
webpack-dev-server html-webpack-plugin
安装成功后在根目录下创建index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>前端设计模式</title> </head> <body> <p>前端设计模式</p> </body> </html>
修改webpack.dev.config.js文件
添加
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin')
效果如下
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry:'./src/index.js', output:{ path: __dirname, filename: './release/bundle.js' }, plugins: [ new HtmlWebpackPlugin({ template:'./index.html' }) ], devServer:{ contentBase:path.join(__dirname,'./release'), open:true, port:9000 } }
修改package.json文件
将scripts中的dev修改为
"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
效果如下:
{ "name": "jsdesgin", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development" }, "author": "", "license": "ISC", "devDependencies": { "html-webpack-plugin": "^3.2.0", "webpack": "^4.20.2", "webpack-cli": "^3.1.1", "webpack-dev-server": "^3.1.9" } }
做完上述步骤后
在cmd中运行cnpm run dev