GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → kaivin → Webpack4.x

kaivin / Webpack4.x

webpack4.x详细配置步骤

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

scsslesspostcsswebpack4

Projects that are alternatives of or similar to Webpack4.x

Vscode Stylelint
A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint
Stars: ✭ 260 (+152.43%)
Mutual labels:  scss, less, postcss
Rollup Plugin Styles
🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.
Stars: ✭ 116 (+12.62%)
Mutual labels:  scss, less, postcss
Stylelint
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
Stars: ✭ 9,350 (+8977.67%)
Mutual labels:  scss, less, postcss
Prejss
Get the power of PostCSS with plugins in your JSS styles. 🎨 Just put CSS into JS and get it as JSS object.
Stars: ✭ 238 (+131.07%)
Mutual labels:  scss, less, postcss
Cessie
Transpile your CSS bundle to support CSS variables, calc, and future CSS for legacy browsers.
Stars: ✭ 81 (-21.36%)
Mutual labels:  scss, less, postcss
Reactql
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Stars: ✭ 1,833 (+1679.61%)
Mutual labels:  webpack4, less, postcss
Webpack Template
Webpack 4 template. Vue, Babel 7v, Sass / css / postcss (autoprefixer & css-nano & css-mqpacker)
Stars: ✭ 273 (+165.05%)
Mutual labels:  webpack4, scss
React Redux Boilerplate
Awesome React Redux Workflow Boilerplate with Webpack 4
Stars: ✭ 307 (+198.06%)
Mutual labels:  webpack4, postcss
Nth Start Project
Startkit for HTML / CSS / JS pages layout.
Stars: ✭ 578 (+461.17%)
Mutual labels:  scss, postcss
Three Dots
🔮 CSS loading animations made by single element.
Stars: ✭ 912 (+785.44%)
Mutual labels:  scss, less
antd-color-replacer
适用于 webpack 环境下 的 主题切换插件
Stars: ✭ 22 (-78.64%)
Mutual labels:  postcss, webpack4
Wenk
😉 Lightweight pure CSS tooltip for the greater good
Stars: ✭ 694 (+573.79%)
Mutual labels:  scss, less
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (-66.02%)
Mutual labels:  webpack4, scss
Shopify Theme Lab
Shopify theme development environment using Liquid, Vue and Tailwind CSS 🧪
Stars: ✭ 250 (+142.72%)
Mutual labels:  scss, postcss
Rollup Plugin Postcss
Seamless integration between Rollup and PostCSS.
Stars: ✭ 507 (+392.23%)
Mutual labels:  less, postcss
polymerx-cli
⚡ Unlock the power of Polymer 3, Web Components and modern web tools.
Stars: ✭ 30 (-70.87%)
Mutual labels:  postcss, webpack4
React Latest Framework
a client framework of React
Stars: ✭ 835 (+710.68%)
Mutual labels:  webpack4, less
React Redux Antdesign Webpack Starter
react + redux + ant design + react-router 4 + webpack 4 starter
Stars: ✭ 44 (-57.28%)
Mutual labels:  webpack4, less
Postcss Less
PostCSS Syntax for parsing LESS
Stars: ✭ 93 (-9.71%)
Mutual labels:  less, postcss
webpack-typescript-react
Webpack 5 boilerplate with support of most common loaders and modules (see tags and description)
Stars: ✭ 185 (+79.61%)
Mutual labels:  less, postcss
View All Similar Projects ➔

webpack4.x配置详解

这里只会涉及 webpack4.x 本身的一些配置，不会涉及 react vue koa 这些和 webpack 搭配的配置 只是为了能更好的了解 webpack4.x 的各项配置，目前已经初步完成了整个配置所有环节 可能存在一些使用场景缺失的配置，后续会陆续补全 也欢迎给我提出有待改进或缺失的地方~

这里只是单独的 webpack 配置，后续会出配合 koa react vue 的配置

更新

2019.05.14

  • 第27章新增sass-resources-loader配置，用来在其他页面内的scss样式中调用全局设置的scss变量
  • 新增scss的常用变量设置以及mixin、页面样式初始化scss文件

2019.05.07

  • emmmm，core-js的问题再次做出修正，这回是真的没问题了~,第9章有具体介绍~
  • 第27章新增babel-plugin-dynamic-import-webpack用来解决vue-router中动态导入组件失败的问题

2019.04.10

  • core-js问题还是很多的~ 今天运行项目发现又报错了，这里第9章再次更新报错解决办法~。

2019.04.09

  • 完善eslint配置，增加vue,react,flowtype配置，第25章有更新
  • 补充关于引入支持core-js的方法，主要为添加@babel/runtime-corejs2配置，第9章有更新
  • 新增json-loader配置，新增bable的三个插件@babel/plugin-transform-object-assign @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators

2019.04.08

  • 修正postcss.config.js配置，以及webpack配置文件中postcss-loader的相关配置
  • 第19章关于引入core-js做了补充及修正

2019.04.03

  • webpack的代码打包拆分功能做进一步详细讲解记录
  • 新增wepack引入eslint的配置步骤

2019.04.02

  • 修正部分表述错误的地方
  • 新增引入第三方插件的几种方法对比及具体配置
  • 新增测试、生产环境对代码打包及拆分optimization配置的使用技巧
  • 对配置文件进行了微调

2019.03.27

  • 新增生产环境打包静态资源
  • 新增辅助插件：cross-env,friendly-errors-webpack-plugin,node-notifier,webpack-bundle-analyzer 的配置

2019.03.20

  • 新增测试环境配置文件及命令
  • 新增发布、预览测试及生产环境

2019.03.18

  • 删除框架结构整合相关内容，该内容不再进行框架结构整合
  • 新增viewport适配移动端配置
  • 新增yarn下载插件方案
  • 文档内容进行微调，文件名进行微调
  • 修正html-loader与HtmlWebpackPlugin的冲突问题
  • 新增引入第三方库（jquery,SuperSlide等）的便捷方法

2019.03.12

  • 配置 scss 的笔记有所修改，将避免一些无法预知的错误
  • 配置 babel 的笔记有所修改，babel版本升级到7以上，避免版本不一致报错

由于修改的两篇笔记涉及到部分配置文件的修改，未修改的笔记部分的配置文件依然是老内容，具体更新相关配置修改内容,以更新后的笔记页面内容为准

实现内容

  • 本地服务自动打开浏览器
  • 开发环境：代码调试、热更新、
  • 生产环境：代码压缩、分离 CSS 文件
  • 支持 scss less postcss、babel、CSS3自动添加前缀、base64、字体图标、视频文件、音频文件、代码调试、提取公共代码、路径优化别名配置
  • 第三方库与业务代码拆分
  • 支持 viewport 适配移动端

配置步骤

  1. 项目准备工作
  2. 配置基础的开发环境webpack
  3. HtmlWebpackPlugin
  4. 配置开发服务
  5. 获取ip并打开浏览器
  6. 配置样式-css、postcss、scss、less
  7. 配置图片、文件、图标文字
  8. 初步优化开发环境
  9. 配置babe7l
  10. 配置生产环境webpack
  11. 分离css
  12. CleanWebpackPlugin
  13. 生产环境代码压缩
  14. 开发、生产环境的拆分代码
  15. 模版解析配置项
  16. viewport适配移动端
  17. yarn替代npm方案
  18. html-loader与HtmlWebpackPlugin的冲突
  19. 引入第三方插件库
  20. 发布并预览测试及生产环境
  21. 生产环境打包静态资源
  22. 借助辅助插件让开发更优雅
  23. 细说webpack4引入第三方库
  24. 细说webpack4打包及拆分代码
  25. webpack引入eslint
  26. postcss-loader遇到的坑
  27. 项目配置查漏补缺

命令

  1. 安装
yarn / yarn install
  1. 运行开发环境
yarn start
  1. 输出测试环境
yarn test
  1. 输出生产环境
yarn build
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].