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

Jensen 发布于2019-08-22 17:32 / 781人阅读

摘要：随着前端的发展，越来越复杂的业务，各种各样的插件模块依赖关系，项目复杂度的提升，开发成本越来越高。就是解决了这一系列的问题。

基于webpack4 项目说明地址

webpack-scaffold

关于前端工程化

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

功能列表

模块化管理资源文件，解析编译ES6语法

使用jslint，强制校验js语法，规范js书写规则，并自动修复部分语法格式问题

使用styleLint，强制校验css,less语法，规范书写css,less规则

编译less文件，自动添加浏览器前缀

压缩js,css文件

使用PurifyCSS、OptimizeCssAssets，去除多余css(未被使用)，减少css大小，优化css结构，减少50%-80%的文件大小

支持iconfont字体文件

自动引入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...

开发说明

规范：

默认加载全局的css和js文件，每个页面多带带具有一个css文件和js文件

配置参数lessPath，该目录下的每个less文件都会默认编译输出成css文件，被每个页面使用

配置参数entry，目录下的index.js命名的文件将会作为编译输出

配置参数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

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

生产环境执行以下命令：

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 执行报错

有可能依赖没有下载完成，执行yarn

有可能端口被占用执行以下命令

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

参与开发

下载项目： git clone https://github.com/Jay-tian/w...

启动服务：进入项目根目录，执行 npm run dev

将会打开 http://127.0.0.1:8082/，资源文件在src下,修改代码将会时时生效

http://127.0.0.1:8082/webpack-dev-server, 该路径提供了编译输出的资源路径（资源不是实体文件）

云服务器 GPU云服务器持续集成可持续软件持续集成敏捷持续集成

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95255.html

webpack4配置之分享几个常用插件

摘要：去做想做的事，去爱值得的人去成为自己喜欢的模样，去让自己发光浑身充满力量，充实的日子最美好各位早安，这里是平头哥联盟，我是首席填坑官苏南，用心分享一起成长做有温度的攻城狮。 showImg(https://segmentfault.com/img/bVbjIcs?w=1008&h=298); 前言　　继上一次webpack的基础配置分享之后，本次将分享一些工作中项目常用的配置插件、也...

Jackwoo 2019-08-26 13:24 评论0 收藏0
使用 TypeScript 编写一个完善包含测试、文档和持续集成的库

摘要：单元测试一个合格的库应该包含完整的单元测试。是的支持版，和是一样的，它能够直接运行为后缀的单元测试文件。在目录下加入然后执行即可看到单元测试结果。这篇文章主要是讲述如何使用 TypeScript 编写一个完善，包含测试、文档、持续集成的库，涵盖了编写整个库所需要的技术和工具，主要涵盖：项目目录骨架 TypeScript 配置使用 jest 单元测试使用 vuepress 编写...

lingdududu 2019-08-23 14:27 评论0 收藏0
webpack4配置详解之逐行分析

摘要：今天就尝试着一起来聊聊吧，旨在帮大家加深理解新手更容易上路，都能从到搭建配置自定属于自己的脚手架，或对已封装好的脚手架有进一步的巩固，接下来苏南会详细讲解中的每一个配置字段的作用部分为新增。 showImg(https://segmentfault.com/img/bVbjmMV?w=1008&h=298); 前言　　经常会有群友问起webpack、react、redux、甚至cre...

dkzwm 2019-08-23 13:04 评论0 收藏0
webpack4搭建Vue开发环境笔记~~持续更新

摘要：项目地址一知识获取当前文件所在路径，等同于把一个路径或路径片段的序列解析为一个绝对路径给定的路径的序列是从右往左被处理的，后面每个被依次解析，直到构造完成一个绝对路径如果处理完全部给定的片段后还未生成一个绝对路径，则当前工作目录会被用上生成项目git地址一、node知识 __dirname: 获取当前文件所在路径，等同于path.dirname(__filename) consol...

hankkin 2019-08-23 13:01 评论0 收藏0