webpack学习笔记

devtool

1、源码映射会单独生成一个sourcemap文件，出错了会标识当前出错的列和行

devtool: 'source-map'   // 增加映射文件可以帮助我们调试代码

2、不会产生单独的文件，但是可以显示行和列

devtool: 'eval-source-map'

3、不会产生列，但是是一个单独的映射文件

devtool: 'cheap-module-source-map' // 产生后你可以保留起来

4、不会产生文件，集成在把包后的文件中，不会产生列

devtool: 'cheap-module-eval-source-map'

watch

watch: true,
watchOptions: { // 监控的选项
    poll: 1000, // 每秒
    aggregateTimeout: 500, //防抖
    ignoned: /node_modules/ // 不需要进行监控的文件
}

Plugin

1、cleanWebpackPlugin 清除历史dist文件插件

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

module.exports = {
    plugins: [
        new CleanWebpackPlugin('./dist')
    ]
}

注意：现在这个插件清空地址取决于webpack的output中的path
2、copyWebpackPlugin 拷贝插件

let CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    plugins: [
        new CopyWebpackPlugin([
            {from: 'doc', to: './'} // doc 文件里面的文件夹拷贝到dist文件夹
        ])
    ]
}

3、bannerPlugin 版权声明插件（内置）

let webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.BannerPlugin('make 2019 by [email protected]')
    ]
}

resolve 解析第三方包

module.exports = {
    resolve: {
        modules: [path.resolve('node_modules')],
        extensions: ['.js', '.css', '.json', '.vue'],
        mainFields: ['style', 'main'],
        mainFiles: [], // 入口文件的名字，默认index.js
        alias: { // 别名 vue vue.runtime
            bootstrap: 'bootstrap/dist/css/bootstrap.css'
        }
    }
}