webpack4.0 配置方法

作者: _前端码农_ | 来源:发表于2019-06-09 08:46 被阅读0次

webpack4.0 配置方法
webpack4.0 基础知识
react-create-app eject 后配置 antd
webpack4.0 配置
webpack看这一篇就够了，webpack4.0配置详解。
react配置webpack4.0
第1讲使用vue-cli3.0创建项目
浅谈webpack4.0 性能优化
Webpack4.0配置过程以及调试
webpack4之splitChunks代码分割

2.1 webpack究竟是什么

安装webpack
a.npm init
b.npm install webpack-cli --save-dev

npx webpack index.js 用webpack来执行index.js文件。

2.2

commonJS模块引入方式：

引入：var header=require('./header');
导出：module.exports=header;

ES Module模块引入方式：

引入：import Header from './header';
导出：export default Header; //header文件内部导出的方式

webpack只认识import这样的语法。
webpack核心定义是一个模块打包工具。

2.3 安装

mkdir webpack-demo
npm init
npm install webpack webpack-cli //npm info webpack 查看webpack的所有版本号

2.4 使用webpack的配置文件

a. npx webpack --config webpackconfig.js 执行这个配置文件
b. 'dev': 'webpack' //npm run dev
c. 三种运行webpack的方式
全局安装 : webpack index.js
当前项目安装 : npx webpack index.js
npm scripts : npm run dev > webpack

默认配置 webpack.config.js

const path = require('path');
 
module.exports = {
    mode:'production', //压缩模式 production / development 
    entry:'./src/index.js', //这样运行 npx webpack 会自动执行 index.js 文件。
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'bundle') //有path.resolve得到的是绝对路径，bundle为文件夹的名字
    },
    module:{

    },
    plugins:[
          
    ]
}

webpack-cli 的作用，是让我们可以在命令行运行webpack 和 npx webpack

module: { //webpack默认知道怎么打包js，不知道怎么打包其他资源，所以需要配置打包规则
    rules:[{
        test:/\.(jpg|png|gif|jpeg)$/,
        use:{
            <!-- file-loader 将目标移动到dist目录下，将地址返回（loader就是一个打包方案） -->
            <!-- loader:'file-loader', -->
            <!-- url-loader 可以代替file-loader -->
            loader:'url-loader',
            options:{ //更多配置项
                //placeholder 占位符
                name:'[name]_[hash].[ext]', //ext是后缀
                outputPath:'images/', //打包后文件位置
                limit:10240, //图片大于10240字节时，不打包到js
            }
        }
    },{
        <!-- 怎么打包字体文件  -->
        test:/\.(eot|ttf|svg)$/, 
        use:{
            loader:'file-loader'
        }
    },{
        test:/\.vue$/,
        use:{
            <!-- file-loader 将目标移动到dist目录下，将地址返回（loader就是一个打包方案） -->
            loader:'vue-loader'
        }
    },{
        test:/\.css$/,
        <!-- css-loader 会分析出几个css直接的关系，生成一个css文件 -->
        <!-- style-loader 将css-loader生成的css文件，挂载到header部分-->
        use:['style-loader','css-loader']
    },{
        test:/\.scss$/,
        <!-- 使用sass-loader 需要安装 node-sass 和 sass-loader -->
        <!-- postcss-loader 自动添加浏览器厂商前缀，比如-webkit- -->
        use:['style-loader','css-loader','sass-loader','postcss-loader'] 
    },{
        test:/\.scss$/,
        use:[
            'style-loader',
            {
                loader:'css-loader',
                options:{
                    importLoaders:2,   //对于scss文件里引入的scss文件，也会先执行postcss-loader和sass-loader
                    <!-- img.classList.add(style.avatar)  应用style文件里的.avatar样式-->
                    modules:true //true时，可以使用注释里的语法，不会和其他模块的css样式耦合
                }
            }
            'sass-loader',
            'postcss-loader'
        ] 
    }]
} 

## 新建文件postcss.config.js，用来给浏览器做兼容，自动添加css前缀
module.exports = {
    plugins: [
        require('autoprefixer') 
    ]
}
## plugin 可以在webpack运行到某个时刻的时候，帮你做一些事情

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

plugins:[
    <!-- 会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中  -->
    new HtmlWebpackPlugin({
        template:'src/index.html'
    }),
    <!-- 打包前移除目录 -->
    new CleanWebpackPlugin(['dist'],{
        root:path.resolve(__dirname,'../')
    })
]

## entry 和 output 的基本配置
entry: {
    main: './src/index.js',
    sub: './src/index.js'
},

output: {
    publicPath:'http://cdn.com.cn', //在打包后的文件路径前加上
    filename:'[name].js',
    path:path.resolve(__dirname,'dist')
}

## SourceMap 的基本配置
sourceMap 它是一个映射关系，他知道dist目录下的main.js文件96行实际上对应src目录下index.js文件的第一行。

module.exports = {
    mode:'development',
    devtool:'cheap-module-eval-source-map' // 做源代码和目标生成代码之间的一个映射

    mode:'production',
    devtool:'cheap-module-source-map' //方便调试代码
}

source-map / cheap-inline-source-map 只提示错误行，不提示第几个字符

## webpack-dev-server
devServer: {
    contentBase: './dist',
    open:true,
    port:8080,
    hot:true,
    hotOnly:true,
    proxy:{
        '/api':'http://localhost:3000'
    }
}

"scripts": {
    "start":"webpack-dev-server"
}

## hot module replacement : 当CSS样式改变的时候，不会刷新页面，而是直接应用样式
const webpack = require('webpack');

devServer: {
    contentBase: './dist', // 在哪个目录下启动服务器
    open:true,
    port:8080,
    hot:true, 
    hotOnly:true,
}

plugins: {
    new webpack.HotModuleReplacementPlugin(); 
}

## 使用 babel 处理es6语法
安装 babel-loader @babel/core
babel-loader 只是js和webpack之间的桥梁，并不会转码，真正将es6转为es5的是 @bebal/preset-env
@babel/polyfill 给低版本浏览器补充高版本语法

安装 @babel/plugin-transform-runtime @babel/runtime

# 以下处理业务代码可以
module:{
    rules:[{
        test:/\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options:{
            presets:[['@babel/preset-env',{
                useBuiltIns: 'usage' //只把用到的es6语法转es5，设置这个就不用引@babel/polyfill(已内置)
            }]]
        }
    }]
}
或者
{
    presets:[
        [
            "@babel/preset-env",{
                targets:{
                    chrome:"67",
                },
                useBuiltIns:"usage" 
            }
        ]
    ]
}

# 以下处理插件或者UI库，新建 .babelrc 文件
{
    "plugins":[[
        "@babel/plugin-transform-runtime",{
            "corejs":2, //一定是2，要安装 core 插件
            "helpers":true,
            "regenerator":true,
            "useESModules":false
        }
    ]]
}

# Tree Shaking 只打包用到的东西，如果有些方法没用到，则不会打包进去。
1.plugins:[ //在生产环境，不需要此配置
    optimization:{
        usedExports:true
    }
]
2.package.json文件，添加如下代码：
"sideEffects":false; 所有文件都做tree shaking
"sideEffects":[
    *.css //对css文件不做tree shaking
]

# Development 和 Production 模式
const merge = require("webpack-merge");
module.exports = merge(baseConfig, devConfig);

# webpack 和 code splitting
import _ from lodash; 

plugins:[

],
optimization:{
    splitChunks:{
        chunks:'all' // 自动把公用代码分割成单独文件。
    }
}
 
# MiniCssExtractPlugin 提取css文件，在生产环境启用。用来代替extract-text-webpack-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
rules:[
    {
        test:/\.css$/,
        use:[
            MiniCssExtractPlugin.loader,
            'css-loader' 
        ]
    }
]

plugins:[
    new MiniCssExtractPlugin({
        filename:'./css/[name].css'
    })
]

## 提取公共部分 CommonsChunkPlugin 在4.0被弃用。
optimization: {
    splitChunks: { 
        cacheGroups: {
            commons: {
                name: 'commons',    //提取出来的文件命名
                test:/\.css$/,
                chunks: 'initial',  //initial表示提取入口文件的公共部分
                minChunks: 2,       //表示提取公共部分最少的文件数
                minSize: 0          //表示提取公共部分最小的大小
            }
        }
    }
}

## optimize-css-assets-webpack-plugin用于压缩css文件

optimization:{
    new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css$/g,   //一个正则表达式，指示应优化/最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行，而不是源CSS文件的文件名。默认为/\.css$/g
        cssProcessor: require('cssnano'), //用于优化\最小化CSS的CSS处理器，默认为cssnano
        cssProcessorOptions: { safe: true, discardComments: { removeAll: true } }, //传递给cssProcessor的选项，默认为{}
        canPrint: true                    //一个布尔值，指示插件是否可以将消息打印到控制台，默认为true
    })
}

## 环境变量
方法一："build":"webpack --env.production
方法二："build":"webpack --env production

module.exports=(evn) => {
    if(env && env.production){

    }
}

打包一个库的设置：

module.exports = {
    mode:'production',
    externals:['lodash'],
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'library.js',
        library:'root', //挂载全局变量
        libraryTarget:'umd' //这样可以用common的方式引用。
    }
}

webpack4.0 配置方法
2.1 webpack究竟是什么安装webpacka.npm initb.npm install webpack...
webpack4.0 基础知识
1. webpack基础配置 webpack4.0必须安装webpack和wabpck-cli webpack可以...
react-create-app eject 后配置 antd
背景：升级到 webpack4.0 后，配置修改，主要是 babel-loader\css-loader\post...
webpack4.0 配置
webpack看这一篇就够了，webpack4.0配置详解。
webpack看这一篇就够了，webpack4.0配置详解。什么是webpack，webpack给我们解决了哪些...
react配置webpack4.0
声明：此文章为转载，非本人原创搭建 webpack + React 开发环境我在实际工作中用百度 fis3 搭...
第1讲使用vue-cli3.0创建项目
vue-cli 3.0是基于webpack 4.0之上构建的vue脚手架工具，得益于webpack4.0的零配置特...
浅谈webpack4.0 性能优化
前言：在现实项目中，我们可能很少需要从头开始去配置一个webpack 项目，特别是webpack4.0发布以后，零...
Webpack4.0配置过程以及调试
1. 前提确保本地环境支持node.js。 2. 配置 https://webpack.js.org/guide...
webpack4之splitChunks代码分割
前言 webpack4.0使用splitChunks替代CommonsChunksPlugin插件进行代码分割，这...

webpack4.0 配置方法

2.1 webpack究竟是什么

npx webpack index.js 用webpack来执行index.js文件。

2.2

commonJS模块引入方式：

ES Module模块引入方式：

2.3 安装

2.4 使用webpack的配置文件

相关文章

webpack4.0 配置方法

webpack4.0 基础知识

react-create-app eject 后配置 antd

webpack4.0 配置

webpack看这一篇就够了，webpack4.0配置详解。

react配置webpack4.0

第1讲使用vue-cli3.0创建项目

浅谈webpack4.0 性能优化

Webpack4.0配置过程以及调试

webpack4之splitChunks代码分割

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读