手动配置webpack

最新推荐文章于 2023-03-04 22:05:10 发布

UIEngineer

最新推荐文章于 2023-03-04 22:05:10 发布

阅读量267

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/zjsfdx/article/details/88945217

版权

webpack 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。现在框架对于webpack都进行了

集成，但是作为开发的我们，应该手动配置webpack，以此对其打包编译原理有更详细的认识。

最简单的webpack配置
webpack四个核心概念：

入口(entry)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，

webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本

上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字

段，来配置这些处理过程：

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以

将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行

处理。

插件(plugins)

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压

缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项

(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作

符来创建它的一个实例。

HtmlWebpackPlugin
HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着

编译而发生变化哈希的 webpack bundle 尤其有用。

安装

npm install html-webpack-plugin@2.30.1 --save-dev
yarn add html-webpack-plugin@2.30.1 --dev

基本用法

ar HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

会生成一个包含以下内容的文件 dist/index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

babel-loader
将es6代码解析成es5代码

安装

npm install babel-loader babel-core babel-preset-env --save-dev
yarn add babel-loader@7.1.2 babel-core@6.26.0 babel-preset-env@1.6.1 --dev

style-loader css-loader
为了从 JavaScript 模块中 import 一个 CSS 文件，需要在 module 配置中安装并添加 style-loader和

css-loader。

安装

npm install --save-dev style-loader css-loader
yarn add style-loader@0.19.1  css-loader@0.28.8 --dev

ExtractTextWebpackPlugin
它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不

再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。如果你的样式文件大小较

大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。

安装

npm install --save-dev extract-text-webpack-plugin@1.0.1
 yarn add extract-text-webpack-plugin@3.0.2 --dev

sass-loader
node-sass 和 webpack 是 sass-loader 的 peerDependency，因此能够精确控制它们的版本。

安装

npm install sass-loader node-sass webpack --save-dev

url-loader
处理图片、字体图标，url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

安装

npm install --save-dev url-loader

CommonsChunkPlugin
CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。

通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这个带来页面速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。

webpack-dev-server
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

安装

cnpm i webpack-dev-server --save-dev

webpack.config.js完整代码如下：

const path = require('path');
const webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: './path/to/my/entry/file.js',
    devtool: "inline-source-map",
    devServer: {
        // 修改端口号
        port:8086
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename:'index.bundle.js'
    },
    module: {
        rules: [
            {
                test : /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets:['@babel/preset-env']
                    }
                }
            }, {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use:["css-loader",'sass-loader']
                })
            }, {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    //  如果需要，可以在sass-loader之前将resolve-url-loader链接进来
                    use:['css-loader','sass-loader']
                })
            },
            // 图片处理
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit:8192
                        }
                    }
                ]
            },
            // 字体图标处理
            {
                test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit:8192
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin(),
        // 独立css文件
        new ExtractTextPlugin("css/styles.css"),
        // 提出公共模块
        new webpack.optimize.CommonsChunkPlugin({
            // (公共 chunk(common chunk))的名称
            name: 'common',
            // (公共chunk文件名)
            filename:'js/base.js'
        })
    ]
}