重点
一切的东西都来可以从官网上面去解析:https://webpack.js.org/configuration/dev-server/#devserver
基本配置
var webpack = require("webpack");
module.exports = {
entry: './index.js',
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
rules: [
{test: /\.css$/,use: 'css-loader'}
]
},
devServer: {
// contentBase: './dist', // 在 localhost:8080(默认) 下建立服务,将 dist 目录下的文件,作为可访问文件 contentBase:告诉服务器从哪里提供内容
// 或者通过以下方式配置
contentBase: path.join(__dirname, "dist"),
compress: true,
// 当它被设置为true的时候对所有的服务器资源采用gzip压缩
// 对JS,CSS资源的压缩率很高,可以极大得提高文件传输的速率,从而提升web性能
port: 9000, // 如果想要改端口,可以通过 port更改
hot: true, // 启用 webpack 的模块热替换特性()
inline: true, // 实现实时重载(实现自动刷新功能)默认情况下是 true。
host: "localhost" // 如果你希望服务器外部可访问,指定使用一个 host。默认是 localhost(也就是你可以不写这个host这个配置属性)。
},
plugins :[
new webpack.BannerPlugin("你今晚吃饭了么?")
]
};
使用
1、cli
2、npm
NPM package.json脚本是一种方便有用的方法,可以运行本地安装的二进制文件,而无需关心它们的完整路径。只需定义一个脚本:
“ scripts ”:{
“ start:dev ”: “ webpack-dev-server ”
}
npm run start:dev
NPM将为您自动引用二进制node_modules文件,并执行文件或命令。