Webpack（六）：开发环境配置

安装

​​npm i webpack-dev-server -D​​

配置

​​webpack.config.js​​

/**
  * 开发服务器 自动编译，自动打开浏览器，自动刷新浏览器
  * 特点：只会在内存中编译打包，不会有任何输出
  * 启动：npx webpack-dev-server  `npm i webpack-dev-server -D`
  */ 
 devServer: {
     contentBase: resolve(__dirname, 'build'),   // 运行路径
     compress: true,                             // 启动gzip压缩
     port: 3000,                                 // 端口
     open: true,                                 // 自动打开默认浏览器
 }

运行

​​npx webpack-dev-server​​

修改各类型文件输出路径

: {
     rules: [
         {
             test: /\.css$/,
             use: ['style-loader', 'css-loader']
         },
         {
             test: /\.less$/,
             use: ['style-loader', 'css-loader', 'less-loader']
         },
         {
             test: /\.(png|jpg|gif)$/,
             loader: 'url-loader',
             options: {
                 limit: 100 * 1024,
                 name: '[hash:10].[ext]',
                 outputPath: 'images'            // 修改图片资源输出路径
             }
         },
         {
             test: /\.html$/,
             loader: 'html-loader'
         },
         {
             exclude: /\.(css|js|less|html|png|jpg|gif)$/,
             loader: 'file-loader',
             options: {
                 name: '[hash:10].[ext]',
                 outputPath: 'other'             // 修改其他资源输出路径
             }
         }
     ]
 },

完整代码

const {
    resolve
} = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry: './src/index.js',

    output: {
        filename: "js/build.js",
        path: resolve(__dirname, 'build')
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 100 * 1024,
                    name: '[hash:10].[ext]',
                    outputPath: 'images'
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                exclude: /\.(css|js|less|html|png|jpg|gif)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'other'
                }
            }
        ]
    },

    plugins: [

        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),

    ],

    mode: "development", // development || production

    devServer: {
        contentBase: resolve(__dirname, 'build'),
        compress: true,               
        port: 3000,                
        open: true,                     
    }

}