*【Yarn】 1.定位:包管理工具,替代 2.优点 安装速度快:服务器速度快,并行下载; 版本锁定:安装过后会形成锁文件; 缓存机制:在本地缓存,可以断网使用 3.安装 npm install -g yarn 4.语法 yarn init --- npm init yarn --- npm install yarn global add xxxx@x.x.x --- npm install xxx@x.x.x yarn add xxxx@x.x.x --- npm install xxxx@x.x.x --save yarn add xxxx@x.x.x --dev --- npm install xxxx@x.x.x --save-dev yarn remove xxx --- npm unistall xxx --save yarn run xxx --- npm run xxx PS:deprecate 过时,官网推荐使用安装包安装(或者查看官方网站) *【webpack】 一个前段资源加载/打包工具 yarn add webpack@3.10.0 --dev 多版本webpack共存解决方案:node_module/.bin/webpack *npx webpack --config webpack.config.js 1.webpack需要处理的文件 HTML -->html-webpack-plugin 脚本 -->babel(ES6) + babel-preset-react(React) (ES6 React) 样式 -->css-loader + sass-loader + style-loader 图片/字体--> url-loader + file-loader 2.常用模块 html-webpack-plugin:html单独打包成文件 extract-text-webpack-plugin:样式打包成单独文件 CommonsChunkPlugin:提出通用模块(超过一定引用,就会被抽取出来) 3.webpack-dev-server 为webpack项目提供web服务 本项目使用2.9.7 更改代码自动刷新,路径转发 yarn add webpack-dev-server@2.9.7 --dev 解决多版本共存问题 *【<meta name="viewPoint" content="width=device-width,initial-scale=1">】 initial-scale=1:防止手机变形,比例为1 4.plugins -1.mini-css-extract-plugin .requires webpack 4 to work .his plugin should be used only on production builds without style-loader in the loaders chain -2.url-loader 依赖file-loader
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env','react'],
}
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
'sass-loader'
]
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
-3. SplitChunksPlugin、抽取公共模块 Since webpack v4, the CommonsChunkPlugin was removed in favor of optimization.splitChunks
optimization: {
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
}
}
}
}
"scripts": { "dev" : "node_modules/.bin/webpack-dev-server", "dist" : "WEBPACK_ENV=online node_modules/.bin/webpack -p", "dist_win" : "set WEBPACK_ENV=online&& node_modules/.bin/webpack -p" //-p:线上环境打包 },
/*************示例代码************/
{
"scripts": {
"dev" : "node_modules/.bin/webpack-dev-server",
"dist" : "WEBPACK_ENV=online node_modules/.bin/webpack -p",
"dist_win" : "set WEBPACK_ENV=online&& node_modules/.bin/webpack -p"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.1",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.22.1",
"url-loader": "^1.1.1",
"webpack": "^4.16.5",
"webpack-dev-server": "^3.1.5"
},
"dependencies": {
"font-awesome": "^4.7.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"webpack-cli": "^3.1.0"
}
}
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry:'./src/app.js',
output:{
path:path.resolve(__dirname,'dist'),
filename: 'js/app.js'
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "css/[name].css",
chunkFilename: "[id].css"
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env','react'],
}
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
'sass-loader'
]
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name:'resource/[name].[ext]'
}
}
]
},
{
test: /\.(svg|woff|woff2|eot|ttf|otf)$/,
use: [
{
loader:'file-loader',
options: {
limit: 8192,
name:'resource/[name].[ext]'
}
}
]
}
]
},
devServer: {
contentBase: './dist'
},
optimization: {
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
}
}
}
}
}