webpack 環(huán)境搭建
npm 初始化項目
yarn init
安裝webpack依賴
yarn add webpack webpack-dev-server webpack-cli @webpack-cli/init --dev
webpack 初始化
npx webpack-cli init
? Will your application have multiple bundles? Yes
? Type the names you want for your modules (entry files), separated by comma [example: app,vendor] app
? What is the location of "app"? [example: ./src/app] ./src/app
? Which folder will your generated bundles be in? [default: dist]: dist
? Will you be using ES2015? Yes
? Will you use one of the below CSS solutions? SASS
yarn add v1.12.1
添加編譯插件
## 二選一
## 1. class 寫法 向下兼容
yarn add @babel/plugin-proposal-class-properties --dev
## 2. babel 支持 import
## yarn add @babel/plugin-syntax-dynamic-import --dev
yarn add @babel/preset-env @babel/core cross-env --dev
安裝loader
yarn add html-withimg-loader url-loader file-loader style-loader postcss-loader --dev
插件安裝
yarn add mini-css-extract-plugin uglifyjs-webpack-plugin clean-webpack-plugin copy-webpack-plugin extract-css html-webpack-plugin --dev
安裝webpack-chain
yarn add webpack-chain --dev
此處webpack-chain為5.0.1版本剪芍，是針對webpack 4維護的承疲，需特別注意
github地址：webpack-chain
創(chuàng)建webpack.config.js
const path = require('path');
const isProd = process.env.NODE_ENV === 'production';
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackChain = require('webpack-chain');
const config = new WebpackChain();
config.when(isProd,config=>{
config.entry('index').add('./src/index.js');
}).when(!isProd,config=>{
config.entry('index').add('./src/index.js');
})
// Modify output settings
.output
.path(path.join(__dirname, "dist")).filename('[name].js').end()
.when(isProd, config => {
config.mode('production');
}).when(!isProd,config=>{
config.mode('development').devtool('source-map');
}).end();
/**
* module
*/
config
.module
.rule("compile")
.test(/\.js$/)
.include.add(path.join(__dirname,'src')).end()
.exclude.add(/node_modules/).end()
.use('babel').loader("babel-loader")
.options({
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties']
});
config.module
.rule('images')
.test(/\.(png|jpg|jpeg|gif)/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 1 * 1024,
name: path.posix.join("images","[name].[ext]")
})
// do not base64-inline SVGs.
// https://github.com/facebookincubator/create-react-app/pull/1180
config.module
.rule('svg')
.test(/\.(svg)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.options({
limit: 1024 * 3,//30kb
fallback: 'file-loader'
})
config.module
.rule("fonts")
.test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
.use('url-loader')
.loader('url-loader')
.options({
limit: 10000,
fallback: {
loader: 'file-loader',
options: {
name: path.posix.join("fonts","[name].[ext]")
}
}
});
config.when(isProd,config=>{
config.module.rule("css").test(/\.(sa|sc|c)ss$/)
.use("style").loader(MiniCssExtractPlugin.loader);
}).when(!isProd,config=>{
config.module.rule("css").test(/\.(sa|sc|c)ss$/)
.use("style-loader").loader("style-loader");
});
config.module.rule("css").test(/\.(sa|sc|c)ss$/)
.use('css').loader("css-loader").end()
.use('postcss-loader').loader('postcss-loader');
config.module.rule("scss").test(/\.(sa|sc)ss$/).use("sass-loader").loader("sass-loader");
config.module.rule("lass").test(/\.less$/).use("less-loader").loader("less-loader");
//config.module.rule("html").test(/\.(htm|html)$/i).use("html").loader('html-withimg-loader');
/**
* plugin
*/
config.when(isProd,config=>{
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin");
config.plugin("clear").use(new CleanWebpackPlugin([path.join(__dirname, 'dist')]));
config.optimization.splitChunks({
cacheGroups: {
commons: {
chunks: "initial",
name: "common",
minChunks: 2,
maxInitialRequests: 5, // The default limit is too small to showcase the effect
minSize: 0, // This is example is too small to create commons chunks
reuseExistingChunk: true // 可設(shè)置是否重用該chunk（查看源碼沒有發(fā)現(xiàn)默認(rèn)值）
}
}
});
config.plugin("js").use(new UglifyJSPlugin({}));
config.plugin('extract-css')
.use(MiniCssExtractPlugin, [{
filename: "css/[name].css",
chunkFilename: "css/[name].css"
}]);
// config.plugin('copy').use(new CopyWebpackPlugin([
// {
// from:"./src/sass",
// }
// ]))
})
const HtmlWebpackPlugin = require('html-webpack-plugin');
config.plugin("html").use(HtmlWebpackPlugin, [{
/*
template 參數(shù)指定入口 html 文件路徑已烤，插件會把這個文件交給 webpack 去編譯，
webpack 按照正常流程，找到 loaders 中 test 條件匹配的 loader 來編譯，那么這里 html-loader 就是匹配的 loader
html-loader 編譯后產(chǎn)生的字符串葵陵，會由 html-webpack-plugin 儲存為 html 文件到輸出目錄，默認(rèn)文件名為 index.html
可以通過 filename 參數(shù)指定輸出的文件名
html-webpack-plugin 也可以不指定 template 參數(shù)瞻佛，它會使用默認(rèn)的 html 模板脱篙。
*/
template: "./public/index.html",
filename:"index.html",
/*
因為和 webpack 4 的兼容性問題，chunksSortMode 參數(shù)需要設(shè)置為 none
https://github.com/jantimon/html-webpack-plugin/issues/870
*/
chunksSortMode: 'none',
xhtml: true,
minify: {
collapseWhitespace: false, //刪除空格伤柄，但是不會刪除SCRIPT绊困、style和textarea中的空格
conservativeCollapse: false, //刪除空格，總是保留一個空格
removeAttributeQuotes: false, //刪除引號适刀，刪除不需要引號的值
useShortDoctype: false, //使用短的文檔類型
removeComments: true,
collapseBooleanAttributes: true,
removeScriptTypeAttributes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
}
}]);
config.when(isProd,config=>{
}).when(!isProd,config=>{
config.devServer.host('localhost').port(8080).open(process.os === 'darwin');
})
config.resolve.alias.set("@",path.join(__dirname,"src"));
// Export the completed configuration object to be consumed by webpack
module.exports = config.toConfig();
添加啟動腳本
修改package.json文件中scripts節(jié)點考抄，加入如下配置:
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server",
"build": "cross-env NODE_ENV=production webpack"
}
創(chuàng)建postcss.config.js
module.exports = {
plugins: {
autoprefixer: {
"browsers": [
"ie >= 9",
"ff >= 30",
"chrome >= 34",
"safari >= 7",
"opera >= 23"
]
}
}
}
創(chuàng)建src/index.js
export default class demo {
constructor(){
console.log("init");
}
}
創(chuàng)建example/index.js
import Demo from "../src/index";
const demo = new Demo();
根目錄創(chuàng)建index.html
啟動
yarn run dev
