这里有一份webpack4的配置，项目可直接集成（持续更新）

基于webpack4

项目说明地址

webpack-scaffold

关于前端工程化

前端野蛮生长的时代已通过去了。随着前端的发展，愈来愈复杂的业务，各类各样的插件模块依赖关系，项目复杂度的提高，开发成本愈来愈高。webpack就是解决了这一系列的问题。你能够利用webpack管理各类资源，也能够提早享受es6语法的便利，也能够规范成员之间的开发规范，等等。
关于wepback配置说明，不少同窗都已经分享过不少了，此次分享一下能够直接使用一份webpack项目

功能列表

1. 模块化管理资源文件，解析编译ES6语法
2. 使用jslint，强制校验js语法，规范js书写规则，并自动修复部分语法格式问题
3. 使用styleLint，强制校验css,less语法，规范书写css,less规则
4. 编译less文件，自动添加浏览器前缀
5. 压缩js,css文件
6. 使用PurifyCSS、OptimizeCssAssets，去除多余css(未被使用)，减小css大小，优化css结构，减小50%-80%的文件大小
7. 支持iconfont字体文件
8. 自动引入html5shiv、respond，兼容h5标签以及响应式

持续更新中

目前暂时不支持vue，react

下载依赖

yarn add jay-webpack-scaffold

配置文件

cp ./node_modules/jay-webpack-scaffold/webpack/config.dist.js ./webpack-config.js

根据需求调整相应目录

配置文件参数

entry: 须要编译输出的js 根路径
  output: 输出的路径
  mainJs: 全局使用的js文件路径
  lessPath: 须要编译输出的less 根路径，该目录下，都会被编译输出
  publicPath: 开发环境下，使用路径
  author: 做者名称
  removePattern: 不须要被输出的文件路径 正则表达式，例如 /^\/css\/.*\.js?$/，表示css目录下的全部js文件都不输出（当less做为入口文件时，会输出js文件）
  purifyCssPaths: 被使用到css的全部文件地址，如html页面和js，它会过滤除了这些被使用的css样式
  copyLibs: 须要拷贝的类库，能够拷贝目录，也能够拷贝单独文件
  alias: 引用别名，加快编译速度
  libs: js类库目录，每一个文件都会单独输出，能够对已有的类库模块封装输出

代码格式化配置

配置js代码风格

./node_modules/.bin/eslint --init

修复js代码格式

./node_modules/.bin/eslint --fix filepath

规则列表：https://eslint.org/docs/rules/

配置样式代码风格

项目根目录 .stylelintrc

{
    "extends": "stylelint-config-standard"
}

忽略文件配置 .stylelintignore
规则列表：https://stylelint.io/user-gui...

开发说明

规范：

1. 默认加载全局的css和js文件，每一个页面单独具备一个css文件和js文件
2. 配置参数lessPath，该目录下的每一个less文件都会默认编译输出成css文件，被每一个页面使用
3. 配置参数entry，目录下的index.js命名的文件将会做为编译输出
4. 配置参数mainJs, 全局加载的js

命令(scripts)

"scripts": {
    "build": "NODE_ENV=production settingPath='/webpack-config.js' webpack --config    '/node_modules/jay-webpack-scaffold/webpack/webpack.js'",
    "dev": "NODE_ENV=development settingPath='webpack-config.js' webpack-dev-server --config '/node_modules/jay-webpack-scaffold/webpack/webpack.js'",
  }

你也能够这样使用
webpack.config.js

const webpackConfig = require('jay-webpack-scaffold');
module.exports = webpackConfig;
// 能够自主配置loadeer，plugin，及其余参数

package.json

"scripts": {
    "build": "NODE_ENV=production settingPath='/webpack-config.js' webpack --config    'webpack.config.js'",
    "dev": "NODE_ENV=development settingPath='webpack-config.js' webpack-dev-server --config 'webpack.config.js'",
  }

本地开发环境执行如下命令：

npm run dev

它将会文件生成好，放入内存中。自动监听文件变化
<br/>

生产环境执行如下命令：

npm run build

它将会生产静态资源文件到你定义的目录下

项目中使用

ngixn配置

location ~ ^/dist {
    if (-f $root_dir/dev.lock){
      proxy_pass  http://127.0.0.1:8082;
    }
}

任何/dist/* 的请求，都会代理到http://127.0.0.1:8082，根据不一样需求相应配置

异常状况

npm run dev 执行报错

1. 有可能依赖没有下载完成，执行yarn
2. 有可能端口被占用 执行如下命令

lsof -i:8082 （查看占用端口进程）
kill -9 PID (pid 为进程id号)

参与开发

1. 下载项目： git clone https://github.com/Jay-tian/w...
2. 启动服务：进入项目根目录，执行 npm run dev
3. 将会打开 http://127.0.0.1:8082/，资源文件在src下,修改代码将会时时生效
4. http://127.0.0.1:8082/webpack-dev-server, 该路径提供了编译输出的资源路径（资源不是实体文件）