webpack 入门&配置

时间  2019-11-22
标签 webpack 入门 配置 繁體版
原文   原文链接

什么是Webpack？

webpack 是一个JavaScript程序静态模块打包工具,当webpack处理程序时，会递归构建一个依赖关系图，对程序须要的每一个模块进行编译、压缩、打包等，可打包成一个文件或多个文件。javascript

webpack 的核心概念

其中 entry、output、loader和plugins 是 webpack 的四个核心概念css

  • entry（入口）
  • output（输出）
  • loader
  • plugins（插件）
  • mode（模式）
  • module（模块）
  • chunk

1. entry

入口起点，是指在 webpack 中应该使用哪一个模块，来做为构建内部依赖的开始，webpack 会找出哪些模块是根据入口起点的文件依赖的。html

每一个依赖的模块通过处理后，最终都将打包到名叫 buildle 文件中。java

在webpack中设置entry属性指定一个入口起点或多个入口起点。node

webpack.config.jswebpack

module.exports = {
    entry: "./src/index.js"
}
复制代码

2. output

output属性是告诉 webpack 在哪里输出咱们建立的 buildle 文件，以及如何命名这些文件和设置这些文件的所在路径。web

webpack.config.jsnpm

let path = reuqire("path");
module.exports = {
    outpur:{
        path:path.resolve(__dirname,"dist"),
        filename:"build.js"
    }
}
复制代码

output.path和output.filename 分别指定输出文件的路径，和输出文件的名称json

3. loader

lodaer 能够理解为模块转换器，loader 能够将全部模块内容转为所需的内容，而后在利用 webpack 打包功能，对他们进行处理。浏览器

webpack.config.js

module.exports = {
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['css-loader']
            }
        ]
    }
}
复制代码

在module对象中的rules属性必须有包含test和use属性，这将告诉 webpack 在以.css结尾的文件打包时，先使用css-loader对他进行转换。

4. plugins

loader 被用于转换模块，而 plugins 用于更加普遍的范围，webpack 提供了丰富的插件解决，基于这些接口咱们能够作到任何想作的事情。

webpack.config.js

let webpack = require("webpack"); //适用于 webpack 提供的内部插件
let HtmlWebpackPlugin = require("html-webpack-plugin"); //外部插件，基于 npm 安装
module.exports = {
    plugins:[
        new HtmlWebpackPlugin() //使用插件
    ]
}
复制代码

5. mode

可选择development(开发模式)和production(生产模式)中一个来设置mode的值。 webpack.config.js

module.exports = {
    mode: 'production'
};
复制代码

6. module

在 webpack 中一切皆是模块，每个模块都对应一个文件，webpack 会从 entry 开始递归找出全部依赖的模块。

7. chunk

代码块，一个 chunk 由多个模块组成，用于代码的分割与合并。

配置 webpack

webpack 的配置文件叫作webpack.config.js。是一个导出对象javascript文件。

webpack 配置是标准的Node.js CommonJS模块。在 webpack 配置文件中，采用require导入文件。

1. 初始化

1.1 建立 & 初始化项目

mkdir webpack-demo && cd webpack-demo && npm init -y
复制代码

1.2 安装 webpack, D 是局部安装

npm install webpack webpack-cli -D
复制代码

1.3建立 src 和 dist 目标

mkdir src && mkdir dist
复制代码

建立 src 目录下的index.js

touch index.js
复制代码

2 配置 webpack

2.1 配置webpack 文件

mkdir webpack.config.js
复制代码

2.2 配置 webpack.config.js

let path = path.require("path");
module.exports = {
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"build.js"
    }
}
复制代码

entry 属性的配置能够是多个入口

cd src && mkdir b.js
复制代码
module.exports = {
    entry:{
        A:"./src/index.js",
        B:"./src/b.js"
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"[name]"
    }
}
复制代码

多个入口的状况下，output.filename属性值改成"[name]"，这样输出的文件名和entry设置的入口文件名一一对应。

2.3 在 src 目录建立 index.html 文件

touch index.html
复制代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   <div> 世界，你好</div>
</body>
</html>
复制代码

2.4 配置 package.json 文件，可使咱们在命令行使用npm run build

"scripts":{
    "build":"webpack"
}
复制代码

2.5 配置mode
webpack 的 mode 配置用于提供配置选项告诉 webpack 相应的使用其内置的优化，mode 有三个值：development、production和none。

{
    module.exports = {
        mode: "development"
    }
}
复制代码

3 配置开发服务器

3.1 安装依赖

npm install webpack-dev-server -D
复制代码

3.2 配置 package.json 文件，便于咱们在命令行输入npm run dev

"scripts":{
    "dev": "webpack-dev-server"
}
复制代码

3.3 配置webpack.config.js文件

let path = require("path");
    
    module.exports = {
        devServer:{
            contentBase: path.resolve(__dirname,"dist"),
            host:"localhost",
            port:"3000",
            compress:true, // 是否 gzip 压缩
            open: true // 是否自动打开浏览器窗口
        }
    }
复制代码

4 支持加载 css 文件

  • css-loader
  • style-loader

4.1 安装 loader

npm install css-loader style-loader -D
复制代码

loader 执行顺序是从右到左，从上到下

4.2 配置webpack.config.js文件

module.exports = {
        module:{
            rules:[
                {
                    test:/\.css$/,
                    use:["style-loader","css-loader"] // use属性值能够是 []、string和对象
                }
            ]
        }
    }
复制代码

4.3 配置html-webpack-plugin插件并导入到webpack.config.js文件
html-webpack-plugin 简化了 HTML 文件的建立，而且可以自动产出一个 HTML 文件，而且在里面引入产出后的资源。详情请移步 npmjs 了解。

npm install html-webpack-plugin -D
复制代码
let HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    plugins: [
        // 若是有多个 HTML 文件 HtmlWebpackPlugin 执行屡次
        new HtmlWebpackPlugin({
            template: "./src/index.html", // 模板的文件路径
            filename:"main.html", // 将要写入在 HTML 中的文件名，默认是index.html
            chunks:["A"],
            hash:true, // 在产出的资源后面添加哈希值，以免缓存
            minify:true, //是否对HTML压缩，默认是true
        })
    ]
}
复制代码

5 css 分离

由于 css 的下载和 js 能够一块儿运行，因此当一个 HTMl 很大时，咱们能够把 css 分离单独的文件。

5.1 安装依赖模块

npm install mini-css-extract-plugin -D
复制代码

这个插件能够 css 提取到单独是文件中。支持按需加载 css 和 SourceMaps。此插件在 webpack 4上使用。

5.2 配置webpack-config.js文件

let MiniCssExtractPlugin = require("mini-css-extract-plugin");
    
    module.exports = {
        module:{
            rules:[
                {
                    test:/\.css$/,
                    use:[MiniCssExtractPlugin.loader,"css-loader"] 
                    //该插件自带一个loader 用来处理css变成css文件形式的
                }
            ]
        },
        plugins:[
            new MiniCssExtractPlugin({
                filename:"style.css"//css 文件名
            })
        ]
    }
复制代码

5.3 压缩 JS 和 CSS

由于使用了 css 分离的插件mini-css-extract-plugin，因此这时代码不在自动压缩，须要咱们手动压缩代码。

5.3.1 压缩 CSS

安装依赖

npm install optimize-css-assets-webpack-plugin -D
复制代码

配置webpack.config.js文件

let OptimizeCss = require("optimize-css-assets-webpack-plugin");
module.exports = {
    plugins: [
        new OptimizeCss()
    ]
}
复制代码

5.3.2 压缩 JS

安装依赖

npm install uglifyjs-webpack-plugin -D
复制代码

配置webpack.config.js文件

let UglijsWebpackPligin = require("uglifyjs-webpack-plugin");
module.exports = {
    plugins:[
        new UglijsWebpackPligin({
            cache: true,
            parallel: true,// 并行，多进程快速构建打包
            sourceMap: true // 映射代码源
        })
    ]
}
复制代码

除了uglifyjs-webpack-plugin以外也可使用terser-webpack-plugin。

5.4 less 和 sass

安装依赖

npm install less less-loader -D
npm install node-sass sass-loader -D
复制代码

配置webpack.config.js文件

let path = require("path");
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    module:{
        rules:[
            {
                test:/\.less$/,
                exclude:/node_modules/, // 排除 node_modules 
                include: path.resolve(__dirname,"src"), // 选中范围
                use:[MiniCssExtractPlugin.loader,"css-loader","less-loader"]
            },
            {
                test:/\.scss$/,
                exclude:/node_modules/,
                include: path.resolve(__dirname,"src"), 
                use:[MiniCssExtractPlugin.loader,"css-loader","sass-loader"]
            }
        ]
    }
}
复制代码

5.5 添加 CSS3 属性前缀

有时候为了处理兼容性问题，咱们须要在 css 中加入-webkit,-ms,-o,-moz 这些前缀。

  • Trident内核：主要表明为IE浏览器, 前缀为-ms
  • Gecko内核：主要表明为Firefox, 前缀为-moz
  • Presto内核：主要表明为Opera, 前缀为-o
  • Webkit内核：产要表明为Chrome和Safari, 前缀为-webkit

安装依赖

npm install postcss-loader autoprefixer -D
复制代码

配置webpack.config.js文件

module.exports = {
    module:{
        rules:[
            {
                test:/\.scss$/,
                exclude:/node_modules/,
                use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader","sass-loader"]
            }
        ]
    }
}
复制代码

还须要新建一个postcss.config.js配置文件并配置

touch postcss.config.js
复制代码
module.exports = {
    plugins:[
        require("autoprefixer")
    ]
}
复制代码

6 支持图片

引入图片的三种方式

  • js
  • css
  • html

6.1 安装依赖

npm install file-loader url-loader -D
复制代码

6.2 配置webpack.config.js文件

module.exports = {
    module:{
        rules:[
            {
                test:/\.(png|jpe?g|fig)/,
                use:{
                    loader:"url-loader",
                    options:{
                        limit:200*2024
                    }
                }
            }
        ]
    }
}
复制代码

file-loader和url-loader的区别是url-loader的limit属性可设置一个参数。
limit 值在限制大小以内采用 base64，超过采用file-loader

6.3 安装 HTML 中可用图片依赖

npm install html-withing-loader -D
复制代码

配置webpack.config.js文件

module.exports = {
    module: {
        rules:[
            {
                test:/\.html$/,
                loader: "html-withing-loader"
            }
        ]
    }
}
复制代码

7 转义 ES6/7/JSX

Babel是一个能够编译 JavaScript 的平台，可以把 ES6/7/JSX 编译成 ES5。

7.1 安装依赖

npm install babel-loader @babel/core @babel/preset-env -D
复制代码

7.2 配置webpack.config.js文件

modules.exports = {
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:[
                    loader: "babel-loader",
                    options: {
                        presets: ["@label/preset-env"], // ES6 转成ES5 模块
                    }
                ]
            }
        ]
    }
}
复制代码

此外，还有分别转换装饰器和类的babel包@babel/plugin-proposal-decorators&@babel/plugin-proposal-class-properties。

7.3 @babel/plugin-transform-runtime 插件 从 ES6 编译 ES5 的过程当中，有一些是不被应用的。例如

给index.js添加 Generator 函数

function *fn(){
    yield "哈哈哈..."
}
console.log(fn().next());
复制代码

会在浏览器控制台报错，提示regeneratorRuntime方法找不到。由于此时在编译后的 js 文件中，没有regeneratorRuntime的由来，只有使用。

index.js:8 Uncaught ReferenceError: regeneratorRuntime is not defined
复制代码

@babel/plugin-transform-runtime 就是起到帮助代码填充在转义过程当中一些不存在的代码。该插件在使用时，还需依赖@babel/runtime。

7.4 安装依赖

npm install @babel/plugin-transform-runtime @babel/runtime -D
复制代码

7.5 配置webpack.config.js文件

module.exprots = {
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:["@babel/preset-env"],
                        plugins:["@babel/plugin-transform-runtime"]
                    }
                }
            }
        ]
    }
}
复制代码

7.6 @babel/polyfill 插件

由于@babel/plugin-transform-runtime并不能解决相似"foobar".includes("foo")实例上的这种问题。若是须要polyfill可以使用@babel/polyfill。

安装依赖

npm install @babel/polyfill -D
复制代码

修改index.js文件，可直接在文件里导入@babel/polyfill使用

import "@babel/polyfill";
'aaa'.includes('a');
复制代码

基本的配置到此就结束了。

有任何问题欢迎指出。有其余详情请移步npm & babel & 中文webpack官网

都看到这里给点个赞呗 ^_^ ~

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程