webpack学习笔记

阮一峰webpack教程github

webpack 4

1，webpack如何构建多入口文件

webpack构建单入口文件时

webpack构建多入口文件时

module.exports = {
  entry: {
    bundle1: './main1.js',
    bundle2: './main2.js'
  },
  output: {
    filename: '[name].js'
  }
};

2，webpack.config.js文件内容说明

const webpack = require('webpack');
const UglifyJsPlugin  = require('uglifyjs-webpack-plugin');   //压缩代码插件
const HtmlwebpackPlugin = require('html-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');


module.exports = {
    // 模式
    mode:'production',
    //入口文件
    entry:{
        bundle1:'./src/index.js',
        bundle2:'./src/index2.js'
    },
    //出口文件
    output:{
        filename:'[name].js'
    },
    //模块
    module:{
        //规则（数组）
        rules:[
            {
                test:/\.js?$/,  //匹配条件，正则匹配
                exclude:/node_modules/,     //排除特定条件
                use:{
                    loader:'babel-loader',  //loader 属性的简写方式
                    options:{   //loader的选项  (npm引入的插件名)
                        presets:["@babel/preset-env"]
                    }
                }
            },
            {
                test:/\.css$/,
                //CSS-loader用来读取CSS文件来转换,另一个Style-loader用来往HTML中插入<style>标签
                use:['style-loader','css-loader']
            },
            {
                test:/\.(jpg|png)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit:8192
                    }
                }
            }
        ]
    },
    //插件
    plugins:[
        new UglifyJsPlugin(),
        new HtmlwebpackPlugin({
            title:'webpack自动生成index',
            filename:'index.html'
        }),
        new OpenBrowserPlugin({
            url:'http://localhost:8010'
        })
    ]

}

3，配置es6转es5（babel升级了大版本改动，babel7.X版本）

初始化一下

npm init

然后安装babel配置

npm install babel-loader  -D

npm install  @babel/core -D

npm install  @babel/preset-env -D

4，配置es6转es5（babel6.X版本）

初始化一下

npm init

然后安装babel6.X的配置
（babel-loader需要7.X）

npm install babel-loader@7 -D

npm install babel-core -D

npm install babel-preset-es2015 -D

然后webpack的配置中presets是es2015

presets:["es2015"]

5，引用插件

安装插件

npm install uglifyjs-webpack-plugin -D

引入插件

调用插件

6，mode模式

开发模式
development打包后，一些没有依赖的方法、变量、文件会保留

mode:'development',

生产模式（默认）
production打包后，会启用UglifyJsPlugin插件（移除未使用的内容和文件压缩），比development的文件小

mode: 'production'

不使用优化

mode: 'none'

可以直接指定模式

build: 'webpack --mode production'

一般开发项目时，会自定义配置文件，例如：webpack.base.config.js（公共配置）、webpack.dev.cinfig.js（开发配置）、webpack.prod.config.js（生产配置）。

并分别在开发配置和生产配置中指定mode，在运行webpack是用–config命令指定使用的配置文件。来代替直接指定模式–mode。

build: 'webpack --config build/webpack.dev.config.js'