摘要:最近一周一直都在折腾一些项目中常用的记录下来,以后免去简单的配置再去查文档。常规入口指示应该使用哪个模块,来作为构建其内部依赖图的开始。把代码转换成,在使用语言中有介绍。扩展语法,使用下一代,在使用中有介绍。用于忽略部分文件。
最近一周一直都在折腾webpack,一些项目中常用的记录下来,以后免去简单的配置再去查文档。
常规 1.入口指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。
三种写法:
</>复制代码
entry: "./app/entry", // string | object | array
entry: ["./app/entry1", "./app/entry2"],
entry: {
a: "./app/entry-a",
b: ["./app/entry-b1", "./app/entry-b2"]
},
2.出口
output 属性告诉 webpack 在哪里输出它所创建的 bundles
</>复制代码
output:{
path: path.resolve(__dirname, "dist"), // string,
filename: "bundle.js", // string
filename: "[name].js", // 用于多个入口点(entry point)(出口点?)
filename: "[chunkhash].js", // 用于长效缓存
publicPath: "",
publicPath: "https://cdn.example.com/",
}
3. 模块
开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为_模块_。
</>复制代码
module:{
rules:[{
test: /.jsx?$/,
include: [
path.resolve(__dirname, "app")
],
exclude: [
path.resolve(__dirname, "app/demo-files")
],
// 这里是匹配条件,每个选项都接收一个正则表达式或字符串
// test 和 include 具有相同的作用,都是必须匹配选项
// exclude 是必不匹配选项(优先于 test 和 include)
// 最佳实践:
// - 只在 test 和 文件名匹配 中使用正则表达式
// - 在 include 和 exclude 中使用绝对路径数组
// - 尽量避免 exclude,更倾向于使用 include
issuer: { test, include, exclude },
// issuer 条件(导入源)
enforce: "pre",
enforce: "post",
// 标识应用这些规则,即使规则覆盖(高级选项)
loader: "babel-loader",
// 应该应用的 loader,它相对上下文解析
// 为了更清晰,`-loader` 后缀在 webpack 2 中不再是可选的
// 查看 webpack 1 升级指南。
options: {
presets: ["es2015"]
},
// loader 的可选项
}]
}
## 4.插件(plugins)
插件是 webpack 的支柱功能。webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上
</>复制代码
var webpack = require("webpack");
// 导入非 webpack 自带默认插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var DashboardPlugin = require("webpack-dashboard/plugin");
// 在配置中添加插件
plugins: [
// 构建优化插件
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "vendor-[hash].min.js",
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false,
}
}),
new ExtractTextPlugin({
filename: "build.min.css",
allChunks: true,
}),
new webpack.IgnorePlugin(/^./locale$/, /moment$/),
// 编译时(compile time)插件
//html文件插件
new HtmlWebpackPlugin({
template: "index.html"
title: "My App",
filename: "assets/admin.html",
chunks: ["app"],
excludeChunks: [ "dev-helper" ]
})
]
5 .开发中 Server(devServer)
</>复制代码
devServer: {
//proxy: { // proxy URLs to backend development server
// "/api": "http://localhost:3000"
// },
contentBase: path.join(__dirname, "public"), // boolean | string | array, static file location
compress: true, // enable gzip compression
//historyApiFallback: true, // true for index.html upon 404, object for multiple paths
hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
//https: false, // true for self-signed, object for cert authority
//noInfo: true, // only errors & warns on hot reload
// ...
},
devtool:"none"/"source-map" // 生产环境
devtool:"eval-source-map"//开发环境
7. externals
</>复制代码
//配置
externals: {
jquery: "jQuery"
}
//代码中使用
import $ from "jquery";
$(".my-element").animate(...);
附录
1. loader 分类列表
加载文件
raw-loader:把文本文件的内容加载到代码中去
file-loader:把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件,
url-loader:和 file-loader 类似,但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去,在
source-map-loader:加载额外的 Source Map 文件,以方便断点调试,
svg-inline-loader:把压缩后的 SVG 内容注入到代码中,
node-loader:加载 Node.js 原生模块 .node 文件。
image-loader:加载并且压缩图片文件。
json-loader:加载 JSON 文件。
yaml-loader:加载 YAML 文件。
handlebars-loader:把 Handlebars 模版编译成函数返回。
markdown-loader:把 Markdown 文件转换成 HTML。
babel-loader:把 ES6 转换成 ES5,在3-1使用 ES6 语言中有介绍。
ts-loader:把 TypeScript 转换成 JavaScript,在3-2使用 TypeScript 语言中有遇到。
awesome-typescript-loader:把 TypeScript 转换成 JavaScript,性能要比 ts-loader 好。
coffee-loader:把 CoffeeScript 转换成 JavaScript。
css-loader:加载 CSS,支持模块化、压缩、文件导入等特性。
style-loader:把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSS。
sass-loader:把 SCSS/SASS 代码转换成 CSS,在3-4使用 SCSS 语言中有介绍。
postcss-loader:扩展 CSS 语法,使用下一代 CSS,在3-5使用 PostCSS中有介绍。
less-loader:把 Less 代码转换成 CSS 代码。
stylus-loader:把 Stylus 代码转换成 CSS 代码。
eslint-loader:通过 ESLint 检查 JavaScript 代码,在 3-16检查代码中有介绍。
tslint-loader:通过 TSLint 检查 TypeScript 代码。
mocha-loader:加载 Mocha 测试用例代码。
coverjs-loader:计算测试覆盖率。
vue-loader:加载 Vue.js 单文件组件,在3-7使用 Vue 框架中有介绍。
i18n-loader:加载多语言版本,支持国际化。
ignore-loader:忽略掉部分文件,在3-11构建同构应用中有介绍。
ui-component-loader:按需加载 UI 组件库,例如在使用 antd UI 组件库时,不会因为只用到了 Button 组件而打包进所有的组件。
context-replacement-plugin:修改 require 语句在寻找文件时的默认行为。
ignore-plugin:用于忽略部分文件。
extract-text-webpack-plugin:提取 JavaScript 中的 CSS 代码到多带带的文件中
prepack-webpack-plugin:通过 Facebook 的 Prepack 优化输出的 JavaScript 代码性能,
uglifyjs-webpack-plugin:通过 UglifyES 压缩 ES6 代码,
webpack-parallel-uglify-plugin:多进程执行 UglifyJS 代码压缩,提升构建速度。
imagemin-webpack-plugin:压缩图片文件。
webpack-spritesmith:用插件制作雪碧图。
ModuleConcatenationPlugin:开启 Webpack Scope Hoisting 功能,
dll-plugin:借鉴 DDL 的思想大幅度提升构建速度,
hot-module-replacement-plugin:开启模块热替换功能。
serviceworker-webpack-plugin:给网页应用增加离线缓存功能,在
stylelint-webpack-plugin:集成 stylelint 到项目中,
i18n-webpack-plugin:给你的网页支持国际化。
provide-plugin:从环境中提供的全局变量中加载模块,而不用导入对应的文件。
web-webpack-plugin:方便的为单页应用输出 HTML,比 html-webpack-plugin 好用。
</>复制代码
var path = require("path")
var webpack = require("webpack")
//性能分分析
const WebpackMonitor = require("webpack-monitor");
const HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
mode: " "production" | "development" | "none"",
entry: {
a: "./app/entry-a",
b: ["./app/entry-b1", "./app/entry-b2"]
},
output: {
path: path.resolve(__dirname, "dist"), // string,
filename: "bundle.js", // string
filename: "[name].js", // 用于多个入口点(entry point)(出口点?)
filename: "[chunkhash].js", // 用于长效缓存
publicPath: "",
publicPath: "https://cdn.example.com/"
},
module: {
rules: [
{
test: /.js$/,
loader: "babel-loader",
exclude: /node_modules/
},
{
// 用正则去匹配要用该 loader 转换的 CSS 文件
test: /.css$/,
use: ExtractTextPlugin.extract({
use: ["style-loader", "css-loader", "postcss-loader"],
include: path.join(__dirname, "./src"),
exclude: /node_modules/
})
},
{
test: /.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
loader: {
loader: "file-loader",
options: {
name: "[name].[ext]?[hash]"
}
}
},
{
test: /.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
loader: {
loader: "url-loader",
options: {
limit: 5 * 1024, // 图片大小 > limit 使用file-loader, 反之使用url-loader
outputPath: "images/" // 指定打包后的图片位置
}
}
},
{
// 暴露模块
test: require.resolve("jquery"), // 注意 这里是require的resolve 方法
use: {
loader: "expose-loader",
options: "$"
}
}
]
},
plugins: [
// 构建优化插件
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename: "vendor-[hash].min.js"
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: false
}
}),
//提取css文件
new ExtractTextPlugin({
filename: "build.min.css",
allChunks: true
}),
new WebpackMonitor({
capture: true, // -> default "true"
target: "../monitor/myStatsStore.json", // default -> "../monitor/stats.json"
launch: true, // -> default "false"
port: 3030 // default -> 8081
}),
//html文件插件
new HtmlWebpackPlugin({
template: "index.html",
title: "My App",
filename: "assets/admin.html",
chunks: ["app"],
excludeChunks: ["dev-helper"]
})
],
devServer: {
//proxy: { // proxy URLs to backend development server
// "/api": "http://localhost:3000"
// },
contentBase: path.join(__dirname, "public"), // boolean | string | array, static file location
compress: true, // enable gzip compression
//historyApiFallback: true, // true for index.html upon 404, object for multiple paths
hot: true // hot module replacement. Depends on HotModuleReplacementPlugin
//https: false, // true for self-signed, object for cert authority
//noInfo: true, // only errors & warns on hot reload
// ...
},
devtool: "eval-source-map", //开发环境
//配置
externals: {
jquery: "jQuery"
}
};
其他
设置淘宝npm镜像
</>复制代码
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
vm 适配
</>复制代码
cnpm i postcss-import postcss-url autoprefixer postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano postcss-viewport-units cssnano-preset-advanced -D
npm install viewport-units-buggyfill
var hacks = require("viewport-units-buggyfill/viewport-units-buggyfill.hacks");
require("viewport-units-buggyfill").init({
hacks: hacks
});
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/108394.html
摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...
摘要:项目的架构也是最近在各种探讨研究。还求大神多指点项目技术总结技术栈项目结构探究初体验关于项目中的配置说明项目简单说明开发这一套,我个人的理解是体现的是代码分层职责分离的编程思想逻辑与视图严格区分。前端依旧使用技术栈完成。 项目地址:https://github.com/Nealyang/R...技术栈:react、react-router4.x 、 react-redux 、 webp...
摘要:更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的 更多资源请Star:https://github.com/maidishike... 文章转自:https://github.com/jsfr...
摘要:流程源处理源代码,例如过滤任何值。工艺类从编译后处理生成的文件,例如对类进行字节码增强。整合后的测试执行集成测试后执行所需的操作。校验运行任何检查以验证包装是否有效并符合质量标准。 nodejs和es6 nodejs的语法和es6不一样,如模块系统,一个是CommonJS的require、一个是es6的import,写模块也不一样。 nodejs的npm 我来理解,nodejs类似与j...
摘要:前言本文基于,主要涉及基本概念基本配置和实际项目打包优化。关于概念方面参考官网,常用配置来自于网络资源,在文末有相关参考链接,实践部分基于自己的项目进行优化配置。同一文件中,修改某个影响其他。 前言:本文基于weboack4.x,主要涉及webpack4 基本概念、基本配置和实际项目打包优化。关于概念方面参考官网,常用配置来自于网络资源,在文末有相关参考链接,实践部分基于自己的项目进行...
阅读 3113·2021-09-26 10:18
阅读 5363·2021-09-22 15:02
阅读 2845·2019-08-30 15:53
阅读 1887·2019-08-29 18:41
阅读 2730·2019-08-27 10:58
阅读 2672·2019-08-26 13:49
阅读 2799·2019-08-26 12:17
阅读 942·2019-08-26 11:49