分类: JavaScript
2018-11-19 21:27:31
经常会有群友问起webpack、react、redux、甚至create-react-app配置等等方面的问题,有些是我也不懂的,慢慢从大家的相互交流中,也学到了不少。
今天就尝试着一起来聊聊Webpack吧,旨在帮大家加深理解、新手更容易上路,都能从0到1搭建配置自定属于自己的脚手架,或对已封装好的脚手架有进一步的巩固,接下来苏南会详细讲解webpack中的每一个配置字段的作用(部分为webpack4新增)。
近两年,前端一直在以一个高速持续的过程发展,常常会有网友在调侃老了、学不动了,
虽是在调侃却又间接阐述着无奈,迫于生活的压力,不得不提速前行,
因为没有谁为你而停留,公司不会、社会不会、同伴不会……,停下可能将意味着淘汰 —— 理想很丰满,现实很骨感,所以让我们一起进步,共同加薪,奋斗吧骚年,加油。。
~~吐槽过了,接着聊正事~~。
各位大佬早安,这里是@IT·平头哥联盟,我是,用心分享 做有温度的攻城狮。
公众号:honeyBadger8,群:912594095
//方式一:单文件写法 entry: {
index: './src/pages/route.js',
//about: './src/pages/about.js', //other:()=>{...} //首席填坑官?苏南的专栏,公众号:`honeyBadger8` } //方式二:多文件写法 entry: {
/*index:[ //首席填坑官?苏南的专栏
'webpack-hot-middleware/client',
'./src/root.js'
],*/ index: ['./src/root.js'],
vendors : ['react','react-dom','redux','react-router','classnames'],
}
output: {
path: path.resolve(__dirname, '../assets'),
filename: 'js/[name].js',
chunkFilename: 'js/[name].[chunkhash:8].js',
publicPath: '/_static_/', //最终访问的路径就是:localhost:3000/_static_/js/*.js //pathinfo:true, }
模板 | 描述 |
---|---|
hash | 模块标识符的hash,一般应用于filename:'[name].[hash].js' |
chunkhash | 按需分块内容的 hash,它是根据chunk自身的内容计算而来 |
contenthash | 这个没有用过,看了下文档它是在提取css文件时根据内容计算而来的 hash ,结合ExtractTextWebpackPlugin插件使用 |
hash长度 | 默认20,可自定:[hash:8]、[chunkhash:16] |
webpack --mode development/production //方法二 ……
mode:'development/production' ……
//环境变更也可以直接 在启动中设置 //webpack --env.NODE_ENV=local --env.production --progress //splitChunks 默认配置 ,首席填坑官?苏南的专栏 splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10 },
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true }
}
}
optimization: {
runtimeChunk:true,//方式一 runtimeChunk: {
name: entrypoint => `runtimechunk~${entrypoint.name}` //方式二 }
}
以上为自定配置中使用频率较高的选项,公众号:honeyBadger8
//extensions 后缀可以省略, import Toast from 'src/components/toast'; // alias ,短路径 import Modal from '../../../components/modal' //简写 ,首席填坑官?苏南的专栏 import Modal from 'src/components/modal'
resolve: {
extensions: ['.js', '.jsx','.ts','.tsx', '.scss','.json','.css'],
alias: {
src :path.resolve(__dirname, '../src'),
components :path.resolve(__dirname, '../src/components'),
utils :path.resolve(__dirname, '../src/utils'),
},
modules: ['node_modules'],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
['env',
{
targets: {
browsers: CSS_BROWSERS,
},
}],'react', 'es2015', 'stage-0' ],
plugins: [
'transform-runtime',
'add-module-exports',
],
},
},
],
},
{
test: /\.(scss|css)$/,
use: [
'style-loader',
{loader: 'css-loader',options:{plugins: [require('autoprefixer')({browsers: CSS_BROWSERS,}),],sourceMap: true}},
{loader: 'postcss-loader',options:{plugins: [require('autoprefixer')({browsers: CSS_BROWSERS,}),],sourceMap: true}},
{loader: 'sass-loader',options:{sourceMap: true}}
]
},
{
test: /\.(png|jpg|jpeg|gif)$/,
exclude: /node_modules/,
use: [
{
loader: 'url-loader?limit=12&name=images/[name].[hash:8].[ext]',
},
],
},
{
test: /\.(woff|woff2|ttf|eot|svg)$/,
exclude: /node_modules/,//首席填坑官?苏南的专栏,公众号:`honeyBadger8` use: [
{
loader: 'file-loader?name=fonts/[name].[hash:8].[ext]',
},
],
},
],
},
//方式一:不配置方式二的内容 webpack-dev-server --config webpack/webpack.config.dev.js //指定 端口: --port=8080 //开启热更新:--hot //gzip: --compress //方式二 devServer :
contentBase:'./assets',
host: '0.0.0.0',
port: 9089,
publicPath: '/assets/',
historyApiFallback: {
index: '/views/index.html' },
/*
匹配路径,进入不同的入口文件,首席填坑官?苏南的专栏,公众号:`honeyBadger8`
rewrites: [
{ from: /^\/$/, to: '/views/landing.html' },
{ from: /^\/subpage/, to: '/views/subpage.html' },
{ from: /./, to: '/views/404.html' }
]
}
*/ compress: true,
noInfo: true,
inline: true,
hot: true,
stats: {
colors: true,
chunks: false },
proxy:{
'/mockApi': '' ,//请求可直接写成 /mockApi/api/login... }
}
以上就是工作中react自定脚手架的配置总结,希望能对您有所帮助,webpack4的改动蛮大的,功能比之前强大了少,也简便了开发者很多的麻烦,效率大大提高,但同时也意味着我们对于底层的东西,了解的更少了,下一节将为大家分享一些常用的插件/以及用法的分析,欢迎持续关注,记得点个赞哦,当然您能动动手指关注下方公众号就更棒了,谢谢支持!
easy-mock 最好的备胎没有之一
immutability因React官方出镜之使用总结分享!
小程序项目之做完项目老板给我加了6k薪资~
小程序项目之填坑小记
面试踩过的坑,都在这里了~
你应该做的前端性能优化之总结大全!
如何给localStorage设置一个过期时间?
动画一点点 - 如何用CSS3画出懂你的3D魔方?
动画一点点 - 手把手教你如何绘制一辆会跑车
SVG Sprites Icon的使用技巧