Js | webpack-dev-server配置

重点

一切的东西都来可以从官网上面去解析：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文件，并执行文件或命令。