【webpack4】基本配置和入门api

gaojie0

2019-06-27

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: {
        a: './src/index.js',
        b: './src/a.js'//入口文件
    },
    optimization:{ //拆分模块，公共模块提取
        splitChunks:{
            chunks:"all"
        }
    },
    output: {
        path: path.resolve(__dirname, 'dist'),//通过HtmlWebpackPlugin插件生成的html文件存放在这个目录下面
        filename: '[name].js',//主入口的文件名
        chunkFilename: '[id].bundle.js'//非主入口的文件名
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader?name=img/[name].[hash:6].[ext]' 
                ]
            }
        ]
    },
    plugins: [ //生产index.html插件
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
            inject: 'true',
            // chunks:['manifest','a']
           
        })
    ]
};

Node.js

Path

var path = require("path");

path.join([path1][, path2][, ...])//用于连接路径。该方法的主要用途在于，会正确使用当前系统的路径分隔符，Unix系统是"/"，Windows系统是"\"。

path.resolve(from, to)//用于将相对路径转为绝对路径。

全局对象

global //最根本的作用是作为全局变量的宿主。

__filename //表示当前正在执行的脚本的文件名。它将输出文件所在位置的绝对路径，且和命令行参数所指定的文件名不一定相同。 如果在模块中，返回的值是模块文件的路径。

__dirname //表示当前执行脚本所在的目录。

"build": "rm -rf dist && atool-build && mkdir -p dist/${npm_package_name}/${npm_package_version} && mv dist/*.* dist/${npm_package_name}/${npm_package_version}/"

常用插件

html-webpack-plugin

自动生成html插件

autoprefixer

自动检测兼容性给各个浏览器加个css内核前缀的插件

copy-webpack-plugin

拷贝资源插件

cnpm install --save-dev copy-webpack-plugin

new CopyWebpackPlugin([{
    from: __dirname + '/src/public'
}]),

webpack.ProvidePlugin [webpack内置插件 ]

全局挂载插件

uglifyjs-webpack-plugin

压缩js

DefinePlugin

new webpack.DefinePlugin(definitions)

DefinePlugin可以在编译时期创建全局变量。
该特性适用于开发版本同线上版本在某些常量上有区别的场景。
比如，可能会通过全局变量定义是否需要打印日志，在开发版中打印日志，
而在先上版本不打印日志。

// webpack.config.js
plugins:[
      new webpack.DefinePlugin({
        // 全局debug标识
        __DEV__: debug,
    }),

]

new webpack.DefinePlugin({
 PRODUCTION: JSON.stringify(true),
 VERSION: JSON.stringify("5fa3b9"),
 BROWSER_SUPPORTS_HTML5: true,
 TWO: "1+1",
 "typeof window": JSON.stringify("object")
})

console.log("Running App version " + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require("html5shiv");

htmlwebpackplugin