LLWEB

Appearance

webpack 基础 ​

what's webpack ​

wiki ​

Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码

Webpack 可以从终端、或是更改 webpack.config.js 来设置各项功能

要使用 Webpack 前须先安装 Node.js。Webpack 其中一个特性是使用加载器来将资源转化成模块。开发者可以自定义加载器的顺序、格式来因应项目的需求

https://zh.wikipedia.org/wiki/Webpack

webpack.js.org ​

打包所有的资源

打包所有的脚本

打包所有的图片

打包所有的样式

https://webpack.js.org/

reference ​

https://www.quora.com/What-is-Webpack

使用 ​

全局安装 webpack ​

shell
npm install -g webpack

初始化 ​

shell
npm init

为项目安装 ​

shell
npm install --save-dev webpack

webpack.config.js 文件

shell
module.exports = {
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    }
};

运行 ​

shell
webpack

配置 npm start ​

修改 package.json 文件

shell
"scripts": {
  "start": "webpack"
}

Source Maps ​

shell
module.exports = {
    devtool: 'eval-source-map',
};
devtool 选项说明
source-map在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的 source map，但是它会减慢打包速度
cheap-module-source-map在一个单独的文件中生成一个不带列映射的 map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便
eval-source-map使用 eval 打包源文件模块，在同一个文件中生成干净的完整的 source map。这个选项可以在不影响构建速度的前提下生成完整的 sourcemap，但是对打包后输出的 JS 文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项
cheap-module-eval-source-map这是在打包文件时最快的生成 source map 的方法，生成的 Source Map 会和打包后的 JavaScript 文件同行显示，没有列映射，和 eval-source-map 选项具有相似的缺点

本地服务器 ​

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

webpack.config.js增加

shell
module.exports = {
  devServer: {
    contentBase: "./public",
    historyApiFallback: true,
    inline: true
  }
}

contentBase：默认 webpack-dev-server 会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）

port：设置默认监听端口，如果省略，默认为”8080“

inline：inline

historyApiFallback：在开发单页应用时非常有用，它依赖于 HTML5 history API，如果设置为 true，所有的跳转将指向 index.html

package.json增加

shell
"scripts": {
  "server": "webpack-dev-server --open"
}

执行

shell
npm run server

style-loader ​

一般与css-loader结合使用

局部 ​

json
{
  "module": {
    "rules": [
      {
        "test": /\.css$/,
        "use": [{ "loader": "style-loader" }, { "loader": "css-loader" }]
      }
    ]
  }
}

Url ​

json
{
  "module": {
    "rules": [
      {
        "test": /\.css$/,
        "use": [
          {
            "loader": "style-loader/url"
          },
          {
            "loader": "file-loader"
          }
        ]
      }
    ]
  }
}

Useable ​

json
{
  "module": {
    "rules": [
      {
        "test": /\.css$/,
        "use": [
          {
            "loader": "style-loader/useable"
          },
          {
            "loader": "css-loader"
          }
        ]
      }
    ]
  }
}
js
import filecss from './css/file.css'
filecss.use()
filecss.unuse()

options ​

名称类型默认值描述
baseNumbertrue设置模块 ID 基础 (DLLPlugin)
attrsObject{}添加自定义 attrs 到 <style></style>
transformFunctionfalse转换/条件加载 CSS，通过传递转换/条件函数
insertAtStringbottom在给定位置处插入 <style></style>
insertIntoString<head>给定位置中插入 <style></style>
sourceMapBooleanfalse启用/禁用 Sourcemap
convertToAbsoluteUrlsBooleanfalse启用 source map 后，将相对 URL 转换为绝对 URL

reference ​

style-loader

css-loader ​

toString ​

json
{
  "module": {
    "rules": [
      {
        "test": /\.css$/,
        "use": ["css-loader"]
      }
    ]
  }
}
js
const css = require('./css/file.css').toString()
console.log(css)
名称类型默认值描述
rootString/解析 URL 的路径，以 / 开头的 URL 不会被转译
urlBooleantrue启用/禁用 url() 处理
aliasObject{}创建别名更容易导入一些模块
importBooleantrue启用/禁用 @import 处理
modulesBooleanfalse启用/禁用 CSS 模块
minimizeBoolean \ Objectfalse启用/禁用 压缩
sourceMapBooleanfalse启用/禁用 Sourcemap
camelCaseBoolean \ Stringfalse以驼峰化式命名导出类名
importLoadersNumber0在 css-loader 前应用的 loader 的数量
localIdentNameString[hash:base64]配置生成的标识符(ident)

reference ​

css-loader

babel-loader ​

shell
npm install --save-dev babel-loader babel-core babel-preset-env webpack
js
{
  test: /\.js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['env']
    }
  }
}
  • /\.js$/会匹配所有node_modules中的 js 导致很慢，所以需要配置exclude
  • 配置cacheDirectory将转译的结果缓存到文件系统中以提速
  • babel 在每个文件都插入了辅助代码，使代码体积过大
shell
npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save
js
// 'transform-runtime' 插件告诉 babel 要引用 runtime 来代替注入。
{
  test: /\.js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['env'],
      plugins: ['transform-runtime']
    }
  }
}

reference ​

babel-loader

url-loader ​

js
{
    test: /\.(png|jpg|gif)$/,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 81920,
            name: "[path][name].[ext]",
        }
    }]
}

reference ​

webpack 学习笔记-2-file-loader 和 url-loader

鄂ICP备2021017859号
鄂公网安备 42011502001402号