进击webpack4 （基础篇：配置 一）

前文：
进击webpack 4 （基础篇 一）

webpack.config.js基础配置

webpack 有4大概念

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

---

• 入口与出口

---

//webpack.config.js
const path = require('path')
module.exports = {
    mode:'development',  // 指定生产还是开发
    entry:'./src/index.js', // 入口文件
    output:{
        filename:'bundle.js', // 打包后的文件名
        path:path.resolve(__dirname,'./dist')  // 这里需指定一个绝对路径 我们需要node的path模块去解析路径
    }
}

mode: 指定环境是development还是production 决定了打包出来的文件是压缩还是未压缩的

entry： 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。 其中分为单入口跟多入口配置 可以是string，array，object

 // entry:'./src/index.js' 是下面的简写
    entry:{
            main： './src/index.js'
        },

output:包含打包后的名字跟路径， 如果是多入口应用， 可以设置filename为[name].js， entry里的key值会替换掉name 生成文件夹。

---

• loader

loader 用于对模块的源代码进行转换。

const path = require('path')
module.exports = {
    mode:'development',  // 指定生产还是开发
    entry:'./src/index.js', // 入口文件
    output:{
        filename:'bundle.js', // 打包后的文件名
        path:path.resolve(__dirname,'./dist')  // 这里需指定一个绝对路径 我们需要node的path模块去解析路径
    },
    module: {
        rules: []  // 包含一系列的规则
    }
}

• plugin

plugin是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

// 代码省略
module: {
        rules: [ ] //包含一系列规则
    },
    plugins: [
        // new PluginName 去生成js对象供给 webpack compiler 调用
    ]

• 本地开发配置服务

yarn add webpack-dev-server -D

本地开发需要安装webpack-dev-server 内部是基于express 实现的一个服务 ，可让让服务运行在本地，开发更方便

安装完毕在dist目录下新建一个index.html 并且引入打包好后的bundle.js

运行npx webpack-dev-server

并未显示index.html 需要在webpack-config.js 配置

plugins: [
        // new PluginName 去生成js对象供给 webpack compiler 调用
    ],
    devServer:{  
        contentBase: './dist',  //当前服务以哪个作为静态资源路径
        host:'localhost', // 主机名 默认是localhost
        port:3000, // 端口配置
        open:true, // 是否自动打开网页
    }

重新运行npx webpack-dev-server 自动打开网页并且能正常显示页面

如果觉得npx 麻烦的话，可以在package.json 配置脚本

"scripts": {
    "dev": "webpack-dev-server --config webpack.config.js"
  }

样式文件的处理

注意：为了显示效果，不用每次手动修改html 我们先装一个html模板插件

yarn add html-webpack-plugin -D 

webpack-config.js 配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

//....
 plugins: [
        // new PluginName 去生成js对象供给 webpack compiler 调用
        new HtmlWebpackPlugin({
            template:'./index.html',  // 作为模板的文件
            filename:'index.html' //打包生成后的文件 
        })
    ],

进入正题：
样式文件分为css，less scss 之类的 需要各种loader 先以css作为 样例
需要先安装 style-loader跟css-loader

• css的处理

yarn add style-loader css-loader -D

webpack.config.js 配置

// 代码省略
module: {
        rules: [
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },

rules 里放的是一个个规则对象， test是匹配到的文件 loader是从下往上执行， 从右往左执行， 也就是说命中css结尾的文件后 先用css-loader去解析，解析完毕后交由style-loader 插入到html模板里

此处use内部 有2种写法

• loader:['style-loader','css-loader'] // 字符串写法
• loader:['style-loader',{loader:'css-loader',options:{}} 对象写法 在options里可以配置你需求的参数

---

• less的处理

需要安装less less-loader

yarn add less less-loader -D

//webpack-config.js
  module: {
        rules: [
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            }
        ]
    },

sass 配置同理

- 给样式加前缀 如-webkit- 需要安装autoprefixer， postcss-loader

yarn add postcss-loader autoprefixer -D

根目录需要新建postcss.config.js

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

webpack-config.js
 rules: [
           {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            }
        ]

• 提取样式文件

yarn add mini-css-extract-plugin -D

//config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 注意MiniCssExtractPlugin 不能在development环境中使用 ！！
 //....
mode:'production',  // 指定生产还是开发
   
    module: {
        rules: [
           {
                test: /\.less$/,
                use: [
                     MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader"
                ]
            }
        ]
    },
    plugins: [
        // new PluginName 去生成js对象供给 webpack compiler 调用
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'index.html'
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ]
    //...  

- 压缩提取出来的样式文件

需要用到uglifyjs-webpack-plugin，optimize-css-assets-webpack-plugin

yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

//webpack-config.js
module.exports = {
    //...
    optimization: {  // 优化项   这里OptimizeCSSAssetsPlugin 需要UglifyJsPlugin
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true // set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
}

js文件的处理

这里自然轮到我们的babel出场啦 把es6解析为es5 需要这几个loader

yarn add babel-loader @babel/core @babel/preset-env -D

 {
    test:/\.js/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                '@babel/preset-env'
            ]
        }
    }
},

es7的语法类似

class Parent{

    }

这种需要@babel/plugin-proposal-class-properties

yarn add @babel/plugin-proposal-class-properties -D

另外装饰器方面需要

 yarn add @babel/plugin-proposal-decorators -D

 {
    test:/\.js/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                '@babel/preset-env'
            ],
            plugins: [
                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                ["@babel/plugin-proposal-class-properties", { "loose" : true }]
            ]
        }
    }
},

像一些js内置的api 比如生成器 这种需要

yarn add @babel/plugin-transform-runtime -D

 exclude:/node_modules  // 必须配置 不然会解析到node_modules 里的js
 //....
 plugins: [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose" : true },"@babel/plugin-transform-runtime"]
   
]

还有一些es7 实例上的某些方法 。字符串的include 这些也要转换

yarn add @babel/polyfill -D

需要添加到entry上或者在入口文件导入

全局变量的引入问题

有时候我们不想在每个模块都导入某个库或者插件 只需要这样配置

 plugins: [
    // new PluginName 去生成js对象供给 webpack compiler 调用
    new webpack.ProvidePlugin({   // 自动在每个模块内先导入了React
        React:'react'
    }),
],

静态资源的处理

yarn add file-loader url-loader -D

 {
    test: /\.png|jpg|gif$/,
    use: {
        loader:'url-loader',
        options:{
            limit:2048  // 小于2k 的会用url-loader转为base64 否则file-loader转为真实img
            outputPath:'static/image/'  //指定输出目录
        },
    
    }
    
},

预告： 多页面配置 跨域 区分不同环境 映射