webpack打包编译

官网：https://www.webpackjs.com/concepts/

安装：

npm install webpack -g // 全局安装
npm install webpack –save-dev // 局部安装

注：最好在全局安装后根据项目package.json中webpack的版本再局部安装对应的webapck

四个核心概念：

入口(entry)
输出(output)
Loader （JS库）——因为webpack模块化的概念，除了JS和JSON文件，css、图片等不能被读取，必须下载loader去加载。
插件(plugins)

Webpack 1 和webpack 3 的区别：w1只能加载js，w3可以加载js和json。

1、webpack是一个模块打包器（bundler）；

在webpack看来，前端的所有资源文件（js/json/css/img/less….）都会作为模块处理，它将根据模块的依赖关系进行静态分析，生成对应的静态资源。

2、loader

webpack本身只能加载js/json模块，如果要加载其他类型文件（模块），就需要使用对应的loader进行转换/加载；

loader本身是一个函数，接受源文件作为参数，返回转换的结果；

loader一般以xxx-loader的方式命名，xxx代表了这个loader要做的转换功能，比如json-loader。

3、配置文件（默认）

webpack.config.js：是一个node模块，返回一个json格式的配置信息对象。

4、插件

插件可以完成一些loader不能完成的功能；

插件的使用一般是在webpack的配置信息plugins中指定；

CleanwebpackPlugin：自动清除指定文件夹资源；

HtmlwebpackPlugin：自动生成HTML文件；

UglifyJSPlugin：压缩js文件。

webpack.config.js

入口(entry)、输出(output) __dirname是nodejs的内置属性
在 webpack 的配置中 loader 有两个目标：

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。(正则表达式，$——以…结尾)

use 属性，表示进行转换时，应该使用哪个 loader。

对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use

使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中

可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例

模式：提供 mode 配置选项，告知 webpack 使用相应模式的内置优化

通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

const path = require('path');
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
mode: 'production',
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' },
{ test: /\.css$/, use: 'css-loader' }
    ]
  },
plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

`url-loader`

npm install --save-dev url-loader

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

limit: 8192 //限制图片大小为8kb

url-loader会将小于8kb的图片转换为base64打包放在js文件中；大于8kb的图片会放在对应文件夹下。

注：bsae64和图片间可以相互转换还原，所以不安全。可使用Md5、哈希加密

发现问题：经常会出现报错大于8kb的图片加载不到，原因：打包后目标路径不对。

解决方案：

在 webpack.config.js文件的output中添加publicPath属性，定义公共路径；——该属性具有强制性，在使用热加载webpack-dev-server时会出现报错（publicPath和webpack-dev-server不要同时使用）尽量不要使用publicPath；
或移动文件位置。

module.exports = {
mode: 'production',
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
	publicPath: "js/"      //不建议使用，具有强制性对后续加载资源有影响，影响“热加载”
  }
};

`css-loader` 与style-loader结合使用

解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们

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

注意：css-loader只负责加载css模块，不能将样式应用到style标签中；style-loader可以将样式添加到style标签中让样式生效。

自动编译打包 webpack-dev-server ——热加载

提供了一个简单的 web 服务器，并且能够实时重新加载

npm install --save-dev webpack-dev-server

webpack配置：

module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
   devServer: {
      contentBase: './dist'   //默认服务于index.html
   }
  };

以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。若不设置contentBase: './dist' 将会打开项目目录。

注意：因为有了webpack-dev-server（热加载，保存后自动编译），就不会出现图片大于8kb找不到路径的情况。服务器会自动在/dist目录下去找，服务器有内置的帮助矫正路径的库。

添加一个 script 脚本，可以直接运行开发服务器(devserver)：

package.json

"scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "webpack --watch",
+     "start": "webpack-dev-server --open",
      "build": "webpack"
    }

使用webpack插件

常用插件：

使用html-webpack-plugin根据模版html生成引入script的页面
使用clean-webpack-plugin清除dist文件夹

npm install --save-dev html-webpack-plugin

该插件将为你生成一个 HTML5 文件，其中包括使用 script 标签的 body 中的所有 webpack 包。只需添加插件到你的 webpack 配置如下：

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

var webpackConfig = {
  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>

如果你有多个 webpack 入口点，他们都会在生成的HTML文件中的 script 标签内。

plugins: [
	new HtmlWebpackPlugin({template: ‘./index.html’}),
	new CleanWebpackPlugin([‘dist’])
]

new HtmlWebpackPlugin({template: ‘./index.html’})表示根据index.html模版页生成新的页面，并且为新生成的页面添加script标签

new CleanWebpackPlugin([‘dist’]) 删除指定目录下的所有资源

wang_NiFeng

发布了45 篇原创文章 · 获赞 7 · 访问量 2万+

私信关注

安装：