Skip to content

webpack 打包工具,适用于重构和js分离开发

Notifications You must be signed in to change notification settings

Jogiter/webpack.config

Repository files navigation

webpack.config

.editorConfig

# EditorConfig is awesome: http://EditorConfig.org

root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true

.eslintrc.js

使用较宽松的语法,可以在 thunder 配置文件同级目录进行覆盖

module.exports = {
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true
  },
  extends: "eslint:recommended",
  parserOptions: {
    sourceType: "module"
  },
  parser: "babel-eslint",
  rules: {
    indent: ["warn", 4],
    quotes: ["error", "single"],
    semi: ["error", "always"]
  },
  globals: {
    $: true,
    xla: true,
    xlQuickLogin: true,
    getCookie: true,
    setCookie: true,
    haslogin: true,
    login: true,
    logout: true,
    msgExit: true,
  }
};

Option fix: true not working on 2.1.1#248

配置文件

配置文件名 thunder搜索位置如下:

[
  'package.json',
  '.thunderrc',
  '.thunderrc.json',
  '.thunderrc.yaml',
  '.thunderrc.yml',
  '.thunderrc.js',
  'thunder.config.js',
]

配置文件参数

module.exports = {
    entry: './js/index.js',
    template: './index.html',
    publicPath: '/',
    hashDigestLength: 6,
    __cacheDir: './__thunder/',
    __destination: './assets/',
    __ftp: {
        'host': 'host',
        'username': 'username',
        'password': 'password',
        'path': 'remotepath'
    }
}
参数名 是否必须 描述 默认值
entry 可选 [webpack 入口起点](https://webpack.docschina.org/concepts/entry-points/ 配置文件同级目录下的 ./js/index.js
template 可选 html-webpack-plugin 中的模板页面 配置文件同级目录下的 index.html
publicPath 可选 此输出目录对应的公开 URL /
hashDigestLength 可选 散列摘要的前缀长度 6
__cacheDir 可选 缓存打包后生成的文件,用于上传及拷贝到上线目录 ./__thunder/
__destination 可选 打包后实际生成目录 ./assets/
__ftp 可选 ftp 配置,参考node-scp2 默认不开启ftp

注意事项

  1. 打包后会生成 __cacheDir__destination 目录,请在 .gitignore 中忽略掉这 2 个文件夹。
  2. context : 基础目录,绝对路径,用于从配置中解析入口起点(entry point)和 loader。默认使用当前目录,但是推荐在配置中传递一个值。这使得你的配置独立于 CWD(current working directory - 当前执行路径)。

因此无法将 webpack 全局安装到 cli

  1. 打包后兼容 ie8,使用 html-webpack-plugin 时,不注入到页面中即可

TODO

  • 本地的 ssi 使用 ssi-loader 打包到页面中,减少 ssi 的使用。
  • prefetch & preload 插件
  • performence 性能配置
  • .browserslistrc 配置
  • .eslintrc 配置
  • 添加测试
  • css minify

阅读链接

About

webpack 打包工具,适用于重构和js分离开发

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published