进击webpack4 (基础篇二:配置)

栏目: JavaScript · 发布时间: 5年前

内容简介:webpack 有4大概念mode: 指定环境是development还是production 决定了打包出来的文件是压缩还是未压缩的entry: 入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。 其中分为单入口跟多入口配置 可以是string,array,object

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 配置

进击webpack4 (基础篇二:配置)

进击webpack4 (基础篇二:配置)

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:{}}
  • 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上或者在入口文件导入

进击webpack4 (基础篇二:配置)

全局变量的引入问题

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

plugins: [
    // new PluginName 去生成js对象供给 webpack compiler 调用
    new webpack.Provide({   // 自动在每个模块内先导入了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/'  //指定输出目录
        },
    
    }
    
},

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

RESTful Web Services Cookbook

RESTful Web Services Cookbook

Subbu Allamaraju / Yahoo Press / 2010-3-11 / USD 39.99

While the REST design philosophy has captured the imagination of web and enterprise developers alike, using this approach to develop real web services is no picnic. This cookbook includes more than 10......一起来看看 《RESTful Web Services Cookbook》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具