webpack

常见的webpack配置：

// 一个常见的`webpack`配置文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 引入openBrowser 插件
var OpenBrowserPlugin = require('open-browser-webpack-plugin')

module.exports = {
        entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
        output: {
            path: __dirname + "/build",
            filename: "bundle-[hash].js"
        },
        devtool: 'source-map',
        resolve: {// 别名配置
            alias: {
              'vue$': 'vue/dist/vue.js',
              'styles': __dirname + '/src/styles'
            }
        },
        devServer: {
            contentBase: "./public", //本地服务器所加载的页面所在的目录
            historyApiFallback: true, //不跳转
            inline: true,
            hot: true,
            host: 'localhost',
            port: 4000,
            noInfo: true,
            proxy: {
             '/api': {
                target: 'https://api.douban.com/',
                changeOrigin: true,
                pathRewrite: {
                  '^/api': ''
                }
            }
          }
        },
        module: {
            rules: [{
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader"
                    },
                    exclude: /node_modules/
                }, {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [{
                            loader: "css-loader",
                            options: {
                                modules: true,
                                localIdentName: '[name]__[local]--[hash:base64:5]'
                            }
                        }, {
                            loader: "postcss-loader"
                        }],
                    })
                }
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")
        new OpenBrowserPlugin({
             url: 'http://localhost:4000'
         })
    ],
    externals: {
        jquery: 'window.$'
    }
};                 

区分测试环境和生产环境打包版本的url？

webpack中提供自定义变量的插件，在webpack打包时会自动替换，可以编写两个webpack的配置文件分别用于生产环境和开发环境，并定义不同的url变量即可

new webpack.DefinePlugin({
　　HOST_NAME: JSON.stringify("http://www.cnblogs.com/fanlinqiang")
})

如：

axios.get("HOST_NAME/api/regist")

// 编译后
axios.get("http://www.cnblogs.com/fanlinqiang/api/regist")

谈一谈webpack？

基本结构： entry, output, module(loader, dev-server)， plugins （还有externals）

常用的loader：

loader:
style-loader css-loader postcss-loder css相关,postcss-loader 负责做css兼容的。会自动添加兼容前缀。
babel-loader babel-core babel-preset-es2015 babel-preset-env  es6和jsx
sass-loader node-sass scss相关
url-loader file-loader 处理二进制转base64形式。 limit属性
vue-loader 负责加载.vue文件

常用的plugins

html-webpack-plugin 向html文件内插入生成的js和css文件引用
extract-text-webpack-plugin css文件抽离
CommonsChunkPlugin 分离js的公共模块
UglifyJsPlugin 压缩js代码
BannerPlugin 添加头部Banner
DefinePlugin 定义变量并替换
open-browser-webpack-plugin 打开浏览器

遇到过哪些坑：

test: /\.css$/, 
loader: ExtractTextPlugin.extract("style-loader","css-loader")

网上教程，编译不过。

解决方案：查阅官方文档，webpack3后，style-loader写在fallback属性上。

test: /\.css$/, 
loader: ExtractTextPlugin.extract({
　　fallback: "style-loader",
　　use: "css-loader"
})

 webpack打包时删除console.log

new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false,
          drop_debugger: true,
          drop_console: true
        }
      })

 webpack识别html中的img路径并替换

webpack对html的支持不好，需要使用html-withimg-loader来进行处理

module: {
        rules: [
            {
                test: /\.pug$/,
                //use: ['html-loader', 'pug-html-loader']
                // html-withimg-loader 可以识别html中的src引用，使之也通过url-loader处理
                use: ['html-withimg-loader', 'pug-html-loader']
            },{
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 8192,
                    name: util.assetsPath('images/[name].[ext]?[hash]'),
                }
            },
... ...
}

在html中使用图片要在多加 ../../ ,如

img(src='../../static/images/logo.png', alt='')