webpack-common-config

自定义配置的webpack工具

• 配置内容：

  • webpack.base.conf.js

    • js: babel-loader(其中babel-loader仅支持ES6，请根据需要添加'.babelrc'文件)
    • css: mini-css-extract-plugin, css-loader, less-loader, sass-loader, stylus-loader,postcss-loader(其他诸如浏览器兼容配置请根据需要添加'.postcssrc'文件,内置有style-loader，需要进行内联时可修改源代码)
    • font: file-loader 支持后缀 woff|woff2|eot|ttf|otf (内置有url-loader，需要请对源文件进行修改)
    • picture: file-loader 支持后缀 png|jpg|gif|jpeg (内置有url-loader，需要请对源文件进行修改)
    • html: webpack-html-plugin已配置压缩(支持多页面应用，默认首页html与js在/src/index/中,每个页面都必须有一个index.html与index.js进行唯一标识,还必须在源文件中的entry进行设置)
    • 其他: dist目录清理,命令行提示优化

  • webpack.dev.conf.js

    • 增加eslint-loader,eslint已安装alloy,其余配置请根据需要添加'.eslintrc'文件
    • 支持热更新
    • devtool使用"cheap-source-map"

  • webpack.prod.conf.js

    • 支持css文件压缩
    • 支持文件指纹
    • 支持TreeShaking
    • 支持ScopeHoisting

安装教程

npm i webpack webpack-cli js-webpack-config -D

配置教程

• 创建 webpack.dev.conf.js
  • module.exports = require("jc-webpack-config/lib/webpack.dev.conf")
• 创建 webpack.prod.conf.js
  • module.exports = require("jc-webpack-config/lib/webpack.prod.conf")
• 其他配置文件诸如 .babelrc,.browerslistrc,.eslintrc,.eslintignore可直接复制源文件目录下的文件
• 在package.json中scripts替换成如下内容
  • "scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config lib/webpack.prod.conf.js","dev": "webpack-dev-server --config lib/webpack.dev.conf.js --open","lint": "eslint --fix src"},