打包后自动在浏览器中打开
下载模块
全局安装模块
cnpm install -g webpack-dev-server
在webpack.config.js中配置
// 自动打开
devServer: {
open: true,
host: "localhost",
port: 9527
}
在项目中cmd命令窗口输入
webpack-dev-server
自动打开
简化打开、打包命令
在package.json中
打开:设置 "serve": "webpack-dev-server",
打包:设置"build": "webpack",
"scripts": {
"serve": "webpack-dev-server",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
在项目中cmd命令窗口输入
cnpm run serve
自动打开
输入
cnpm run build
webpack.config.js 总代码
//路径模块
const path = require("path")
// 插件、自动生成html,设置titile
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
// 入口--打包从那个文件开始
entry: "./src/main.js",
// 出口--打包之后的文件名字
output: {
// path.resolve("a","b") a/b
path: path.resolve(__dirname, 'dist'), //配置路径
filename: 'main.js' //指定一个输出的文件
},
// 配置css、less、scss、img打包规则
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}, {
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}, {
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}]
},
// 插件
plugins: [
new HtmlWebpackPlugin({
title: "好谷学堂",
template: './src/index.html'
})
],
// 打包模式
mode: "development",
// 自动打开
devServer: {
open: true,
host: "localhost",
port: 9527
}
}