基礎請參考上篇入門： Webpack4.x 入門上手實戰(zhàn)（2018.08）
一、開始
根據(jù)入門篇構(gòu)建一個基礎的項目，在此基礎上進行升級艳丛，不再一一敘述，直接上代碼：
1趟紊、拆分配置文件：
可以根據(jù)自己的需求隨意拆分氮双，這里簡單舉例
在根目錄新建三個文件：webpack.config.js、webpack.entry.js霎匈、webpack.plugins.js
webpack.config.js是必備的配置文件
const path = require('path')
const entry = require('./webpack.entry.js')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const pluginsConfig = require("./webpack.plugins.js")
const pxtorem = require('postcss-pxtorem')
const autoprefixer = require('autoprefixer')
const optimizeCss = require('optimize-css-assets-webpack-plugin')
module.exports = {
// JS 執(zhí)行入口文件
entry: entry,
output: {
// 把所有依賴的模塊合并輸出到一個 bundle.js 文件
filename: './js/[name].bundle.js',
// 輸出文件都放到 superStyle 目錄下
path: path.resolve(__dirname, './superStyle'),
},
plugins: pluginsConfig,
optimization: {
// minimize: true,
minimizer: [new optimizeCss({})],
},
devServer: {
contentBase: './superStyle',
port: 7777,
host: '0.0.0.0',
openPage: 'page'
},
module: {
rules: [
{
test: /\.(png|jpg|gif|eot|svg|ttf|woff)$/,
use:[{
loader:'url-loader',
options:{
limit:2000, // 表示小于2kb的圖片轉(zhuǎn)為base64,大于5kb的是路徑
// outputPath:'../images', //定義輸出的圖片文件夾
name: 'images/[name].[hash:7].[ext]',
publicPath:"../"
}
}]
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(css|less)$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
// publicPath:'../',
use: [
// require.resolve('style-loader'),
{
loader: 'css-loader',
// options: {
// importLoaders: n
// }
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
pxtorem({
rootValue: 100,
propWhiteList: []
}),
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'iOS >= 7',
'Android >= 4',
'>1%',
'Firefox ESR',
'not ie < 9'
],
flexbox: 'no-2009'
})
]
}
},
{
loader: 'less-loader',
options: { javascriptEnabled: true }
}
]
})
}
]
}
};
webpack.entry.js入口配置
module.exports = {
index: './src/js/index.js',
login: './src/js/login.js'
}
webpack.plugins.js插件設置
const webpack = require("webpack")
const entry = require('./webpack.entry.js')
// 分離css > extract-text-webpack-plugin@next
const ExtractTextPlugin = require("extract-text-webpack-plugin")
// 清除目錄
const CleanWebpackPlugin = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 壓縮
const optimizeCss = require('optimize-css-assets-webpack-plugin')
let html = []
Object.keys(entry).forEach(k => {
let h = new HtmlWebpackPlugin({
title: k,
filename: `./page/${k}.html`,
template: `./src/page/${k}.html`,
inject: true,
chunks: [k]
})
html.push(h)
})
module.exports = [
new CleanWebpackPlugin(['superStyle']),
new ExtractTextPlugin("./style/[name].css"),
new optimizeCss({
assetNameRegExp: /\.style\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
}),
new HtmlWebpackPlugin({
title: "",
filename: `./index.html`,
template: `./index.html`,
inject: true,
chunks: ['main']
})
].concat(html)
package.json
{
"name": "dive-into-webpack",
"version": "1.0.0",
"scripts": {
"dev": "webpack-dev-server --open",
"build": "webpack"
},
"dependencies": {},
"devDependencies": {
"autoprefixer": "^9.4.5",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"clean-webpack-plugin": "^1.0.0",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-loader": "^3.0.0",
"postcss-pxtorem": "^4.0.1",
"style-loader": "^0.18.2",
"url-loader": "^1.1.2",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.14"
}
}
二戴差、目錄結(jié)構(gòu)
src文件夾里存放的就是多頁面的，根目錄的index.html和main.js請自行配置铛嘱，可用作多頁面跳轉(zhuǎn)
配置項目錄結(jié)構(gòu)
三暖释、打包后的目錄結(jié)構(gòu)
打包后的目錄結(jié)構(gòu)
