上一篇说了webpack 手动搭建模块，在开发中都是脚手架搭建好的自动化配置。那么怎么用webpack搭建个像脚手架那样的呢。主要有三步。
- 手动搭建模块
- 自动生成html模板
- 配置webpack-dev-server的本地服务
手动搭建模块在上个文章说了。
点我查看自动生成html模板，比较简单，就是webpack的HtmlWebpackPlugin插件。这个插件不用另外安装，它存在于node_modules中。直接在webpack.config.js中使用即可
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
new HtmlWebpackPlugin({
template: "index.html"
}),
- webpack-dev-server是启动本地服务的关键。安装的时候版本不同可能会有冲突，所以最好指定版本安装。
npm install webpack-dev-server@3.11.2 --save--dev
npm install webpack-cli@3.3.2 -g --save--dev
另外还需要在package.json中加入
// 在package.json 修改
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server",
"build": "webpack --mode=development"
},
在webpack.config.js中添加
devServer: {
contentBase: path.join(__dirname, 'dist'), //本地服务根文件
inline: true ,//实时刷新
port: 8080
}
最后运行。
npm run dev
运行起来后直接在浏览器中输入localhost:8080 即可。而且修改东西后会自动更新页面。不用在npm run build一直输入命令刷新了。
完整配置
webpack.config.js
const path = require('path')
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//一旦依赖node 就npm init
module.exports = {
entry : './src/main.js', //入口文件
output : {
path : path.resolve(__dirname,'dist'), //输出目录
filename : 'bundle.js' //输出文件名
},
mode: 'production',
resolve : {
//省略后缀名
extensions : ['.js','.css','.vue'],
alias : {
'@':path.join(__dirname,'./src'),//这样 @就表示根目录src这个路径
vue: 'vue/dist/vue.js',
}
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
// options:vueloaderOptions(isDev),
// exclude:/node_modules/
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
]
},
plugins: [
new webpack.BannerPlugin("版本归闻居士所有."),
new HtmlWebpackPlugin({
template: "index.html"
}),
],
devServer: {
contentBase: path.join(__dirname, 'dist'), //本地服务根文件
inline: true ,//实时刷新
port: 8080
}
}
package.json配置
{
"name": "day06",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server",
"build": "webpack --mode=development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.13.10",
"@babel/preset-env": "^7.13.10",
"babel-loader": "^8.2.2",
"css-loader": "^5.1.2",
"html-webpack-plugin": "^5.3.1",
"style-loader": "^2.0.0",
"vue": "^2.6.12",
"vue-loader": "^14.1.1",
"vue-template-compiler": "^2.6.12",
"webpack-dev-server": "^3.11.2",
"webpack-cli": "^3.3.2"
},
"dependencies": {
"vue": "^2.6.12"
}
}
