2019-08-15

webpack

6 分钟读完 (大约 853 个字) 0次访问

webpack-02-自动打包、插件、Babel等怎么搞

使用webpack-dev-server工具实现自动打包编译

安装webpack-dev-server到本地依赖

1	npm i webpack-dev-server@2 -D

一定要注意版本问题，我亲测

webpack版本别太高，webpack-dev-server别比webpack还高

webpack-dev-server帮我们打包生成的bundle.js文件，没有存放在物理磁盘中

而是在内存中放在了项目根目录，所以在实际磁盘中查不到。

这样每次编译时速度快，减少磁盘消耗

webpack-dev-server的常用命令

想打包完成后
- 自动打开浏览器 –open
- 自定义端口 –port 3000
- 自定义展示目录 –contentBase src
- 不重新编译，而是给bundle.js打补丁 –hot
第一种方法：

1	webpack-dev-server --open --port 3000 --contentBase src --hot

第二种方法：

在webpack.config.js中

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: path.join(__dirname, './src/main.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  devServer: {
    open: true,
    port: 3000,
    contentBase: 'src',
    hot: true //想要hot生效，必须先配置下面的plugins
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

html-webpack-plugin插件作用：

自动在内存中根据指定页面生成内存的页面
把打包好的bundle.js追加到页面中去

const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: path.join(__dirname, './src/main.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  devServer: {
    open: true,
    port: 3000,
    contentBase: 'src',
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), //模板在哪儿
      filename: 'index.html' //在内存中叫啥名
    })
  ]
}

webpack默认只能打包js文件，如要处理css或其他类型文件

先在main.js中引入
1
import './css/index.css'
安装style-loader css-loader包

在webpack配置中有个module属性

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

webpack处理文件的过程
- 判断是否是js文件？是，直接打包；不是，查找对应的第三方loader（在use里找，从后往前找）
默认webpack无法处理CSS中的url

url-loader内部依赖file-loader
1
npm i url-loader file-loader -D
1
{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader' }
配置完后webpack对图片的操作是将图片用base64编码，直接跟页面一起请求，避免二次请求

我们要求小图片才这样处理，大图片正常加载

于是乎设置了limit参数
1
{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=12470' }
我测试的是图片大小等于12470时仍然是base64编码

如果图片大小超出limit，图片名称就会变为 32位哈希值.扩展名

但我们还是可以改成我们原来的名称
1
{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=12470&name=[name].[ext]' }
但会出现问题：如果两张名称一样的图片在两个文件夹中都被引入，就会出现覆盖。因此，

在前面添加哈希值保证唯一名称
1
{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=12470&name=[hash:8]-[name].[ext]' }

url-loader也可处理字体文件

1	{ test: /\.(ttf\|eot\|svg\|woff\|woff2)$/, use: 'url-loader' }

webpack用babel处理高级语法

加载用于语法转换的插件

1	npm i babel-core babel-loader babel-plugin-transform-runtime -D

加载语法转换的规则

1	npm i babel-preset-env babel-preset-stage-0 -D

在webpack.config.js中配置

1 2	{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } //exclude表示用不着转换node_module中的代码

在项目根目录建立.babelrc文件（json格式）

{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}

# webpack, 基础知识

微信