手动配置webpack

时间 2019-11-07

标签手动配置 webpack 繁體版

原文原文链接

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

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

最简单的webpack配置

webpack四个核心概念：node

入口(entry)

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

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

输出(output)

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

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

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

loader

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

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

处理。

插件(plugins)

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

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

想要使用一个插件，你只须要 require() 它，而后把它添加到 plugins 数组中。多数插件能够经过选项

(option)自定义。你也能够在一个配置文件中由于不一样目的而屡次使用同一个插件，这时须要经过使用 new 操做

符来建立它的一个实例。

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

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

基本用法

var 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

基本使用

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

babel-preset-react

安装

yarn add babel-preset-react@6.24.1 --dev

基本使用

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env','react']
          }
        }
      }
    ]
},

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

基本使用

const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };

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

基本使用

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

sass-loader

node-sass 和 webpack 是 sass-loader 的 peerDependency，所以可以精确控制它们的版本。

安装

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

基本使用

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //若是须要，能够在 sass-loader 以前将 resolve-url-loader 连接进来
          use: ['css-loader', 'sass-loader']
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('style.css')
    //若是想要传入选项，你能够这样作：
    //new ExtractTextPlugin({
    //  filename: 'style.css'
    //})
  ]
}

font-awesome

Font Awesome 字体提供了可缩放矢量图标,它能够被定制大小、颜色、阴影以及任何能够用CSS的样式。webpack中配置字体图标前须要提早引入font-awesome库，安装也很简单:

yarn add font-awesome

url-loader

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

安装

yarn add file-loader@1.1.6 url-loader@0.6.2 --dev

基本使用

module.exports = {
  module: {
    rules: [
    // 图片的处理
      {
        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
                    }

                }
            ]
      }
    ]
  }
}

CommonsChunkPlugin

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

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

new webpack.optimize.CommonsChunkPlugin(options);

 // 提出公共模块
new webpack.optimize.CommonsChunkPlugin({
    // (公共 chunk(commnon chunk) 的名称)
    name: 'common',
    // (公共chunk 的文件名)
    filename: 'js/base.js'
})

webpack-dev-server

webpack-dev-server 为你提供了一个简单的 web 服务器，而且可以实时从新加载(live reloading)。

安装

yarn add webpack-dev-server@2.9.7 --dev

基本使用

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

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
     devtool: 'inline-source-map',
     devServer: {
       // contentBase: './dist',
       // 修改端口号
       port: 8086
   },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

完整版webpack.config.js

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

module.exports = {
    entry: './src/app.jsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist/',
        filename: 'js/app.js'
    },
    module: {
        rules: [
            // react(jsx)处理
            {
                test: /\.jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react']
                    }
                }
            },
            // css处理
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            // scss处理
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            // 图片的处理
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        name: 'resource/[name].[ext]'
                    }
                }]
            },
            //字体图标的处理
            {
                test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        name: 'resource/[name].[ext]'
                    }

                }]
            }
        ]
    },
    plugins: [
        // 处理html文件
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        // 独立css文件
        new ExtractTextPlugin("css/[name].css"),
        // 提出公共模块
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            filename: 'js/base.js'
        })
    ],
    devServer: {
        // contentBase: './dist'
        port: 8086
    },
};

package.json

{
  "name": "react-e-commerce-manage",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "",
  "author": "",
  "license": "MIT",
  "scripts": {
    "dev": "node_modules/.bin/webpack-dev-server",
    "build": " node_modules/.bin/webpack"
  },
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "6.24.1",
    "css-loader": "0.28.8",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "html-webpack-plugin": "2.30.1",
    "node-sass": "^4.9.3",
    "sass-loader": "6.0.6",
    "style-loader": "0.19.1",
    "url-loader": "0.6.2",
    "webpack": "3.10.0",
    "webpack-dev-server": "2.9.7"
  },
  "dependencies": {
    "font-awesome": "^4.7.0",
    "react": "16.2.0",
    "react-dom": "16.2.0"
  }
}