webpack搭建本地开发环境

一：清除每次打包生成的文件

1. 安装clean-webpack-plugin插件
2. 在webpack.config.js引入插件
3. 在plugins里面新增一个配置

// 需要清除的目录
new cleanWebpackPlugin(['dist'])

二：配置webpack开发服务器

1. 安装webpack-dev-server
2. 在webpack.config.js里面配置devServer

// 本地服务器配置
devServer: {
    port: 8080,
}

3. 在package.json里面配置webpack的启动命令

"scripts": {
  "server": "webpack-dev-server --open",
  "test": "echo \"Error: no test specified\" && exit 1"
}

三：配置本地代理

1. 在devServer下面配置代理

// 本地服务器配置
devServer: {
    port: 8080,
    // 代理
    proxy: {
        '/api': {
          target: "https://m.weibo.cn",
          changeOrigin: true
        }
    }
}

2. 使用

$.get('/api/comments/show?id=4199740256395164&page=1', function(res) {
    console.log(res);
})

四：开启source-map

1. js的source-map
   在webpack.config.js里面添加devtool就可以

devtool: 'source-map'

总共有7个值，开发的时候建议使用cheap-module-source-map

2. css的source-map
   需要在每个处理css的loader里面options里设置sourceMap: true（注意style-loader开启singleton: true，sourceMap不生效）

五：配置开发环境和生产环境

1. 在根目录下创建build文件夹，分别创建webpack.common.conf.js, webpack.dev.conf.js和webpack.prod.conf.js
2. 配置package.json的文件

"scripts": {
    "server": "webpack-dev-server --env development --open --config build/webpack.common.conf.js",
    "build": "webpack --env production --config build/webpack.common.conf.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

3. 编写webpack.common.conf.js

const productionConfig = require('./webpack.dev.conf');
const developmentConfig = require('./webpack.prod.conf');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var cleanWebpackPlugin = require('clean-webpack-plugin');

const merge = require('webpack-merge');

const generateConfig = env => {
    const scriptLoader = [
        {
            loader: 'babel-loader',
            options: {
                presets: ['env']
            } 
        }
    ];

    // 处理cssloader
    const extractLess = new ExtractTextWebpackPlugin({
        filename: 'css/[name]-min-[hash:5].css',
        allChunks: true // 一开始所有css都打包
    });

    const cssLoaders = [
        {
            loader: 'css-loader',   // 放在后面的先被解析
            options: {
                minimize: true,
                modules: true,
                sourceMap: env === 'development',
                localIdentName: '[local]'
            }
        },
        {
            loader: 'less-loader',
            options: {
                sourceMap: env === 'development'
            }
            
        }
    ];

    const styleLoader = env === 'production'
          ? ExtractTextWebpackPlugin.extract({
                fallback: 'style-loader',
                use: cssLoaders
            })
          : ExtractTextWebpackPlugin.extract({
                fallback: 'style-loader',
                use: cssLoaders
            });

    // 处理文件
    const fileLoader = env === 'production'
        ? [{
                loader: 'url-loader',
                options: {
                    outputPath: './assets/images',  //指定图片路径
                    limit: 10000  // 小于10k使用base64编码
                }      
           }]
        : [
            // 使用url-loader
            {
                loader: 'file-loader',
                options: {
                    outputPath: 'assets/images',  //指定图片路径
                }
                
            }];

    return {
        
        // 入口
        entry: {
            app: './src/app.js'
        },

        // 输出
        output: {
            path: path.resolve(__dirname, '../dist'),
            publicPath: env === 'production' ? './' : '/',
            filename: 'js/[name]-bundle-[hash:5].js'  // 带hash值得js
        },

        module: {
            // 使用ExtractTextWebpackPlugin
            rules: [
                // 处理js
                {
                    test: /\.js$/,
                    use: scriptLoader
                },

                // 处理less
                {
                    test: /\.less$/,
                    use:  styleLoader
                },
                {  // 加载jQuery
                    test: path.resolve(__dirname, 'src/app.js'),
                    use: [
                        {
                            loader: 'imports-loader',
                            options: {
                                $: 'jquery'
                            }
                        }
                    ]
                },
                // 处理html中路径
                {
                    test: /\.html$/,
                    use: [
                        {
                            loader: 'html-loader',
                            options: {
                                attrs: ['img:src']
                            }
                        }   
                    ]
                },
                // 处理图片地址
                {
                    test: /\.(png|jpg|jpeg|gif)$/,
                    use: fileLoader.concat(env === 'production'
                        ? {
                            loader: 'img-loader',
                            options: {
                                mozjpeg: {
                                progressive: true,
                                quality: 65
                                },
                                // optipng.enabled: false will disable optipng
                                optipng: {
                                enabled: false,
                                },
                                pngquant: {
                                quality: '65-90',
                                speed: 4
                                },
                                gifsicle: {
                                interlaced: false,
                                },
                                // the webp option will enable WEBP
                                webp: {
                                quality: 75
                                }
                            }
                          }
                          : [])
                }
                
            ]
        },

        plugins: [
            extractLess,

            // 使用jQuery（npm管理）
            new webpack.ProvidePlugin({
                $: 'jquery'
            }),
            
            new HtmlWebpackPlugin({
                template: './index.html',  // 文件地址
                filename: 'index.html',  // 生成文件名字
                // inject: false,    // 不把生成的css，js插入到html中
                chunks: ['app'],  //指定某一个入口，只会把入口相关载入html
                minify: {  // 压缩html
                    collapseWhitespace: true   // 空格
                }
            }),
             // 需要清除的目录
            new cleanWebpackPlugin(['../dist'])
        ]
    }
    
}

module.exports = env => {
    let config = eval === 'production'
    ? productionConfig
    : developmentConfig
    return merge(generateConfig(env), config)
}

4. 编写开发环境配置

module.exports = {
    // 本地服务器配置
    devServer: {
        port: 8080,
        // 代理
        proxy: {
            '/api': {
              target: "https://m.weibo.cn",
              changeOrigin: true
            }
        },
        logLevel: 'debug'  // 看到控制台更多信息
    },
     // 开启source MAp
     devtool: 'source-map',
}

5. 生产环境配置

var cleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    plugins: [
       
    ]
};