//依賴包--package.json文件 {"name": "webemeet","version": "1.0.0","description": "","main": "index.js","dependencies": {"cnpm": "^6.1.0","expose-loader": "^0.7.5","html-loader": "^0.5.5","jquery": "^3.4.1"},"devDependencies": {"@babel/core": "^7.5.5","@babel/preset-env": "^7.5.5","autoprefixer": "^9.6.1","babel": "^6.23.0","babel-core": "^6.26.3","babel-loader": "^7.1.5","bootstrap": "^3.4.1","clean-webpack-plugin": "^3.0.0","css-loader": "^3.1.0","extract-text-webpack-plugin": "^4.0.0-beta.0","file-loader": "^4.1.0","html-webpack-plugin": "^3.2.0","less": "^3.9.0","less-loader": "^5.0.0","mini-css-extract-plugin": "^0.8.0","postcss-loader": "^3.0.0","raw-loader": "^3.1.0","style-loader": "^0.23.1","url-loader": "^2.1.0","webpack": "^4.38.0","webpack-cli": "^3.3.6","webpack-dev-server": "^3.7.2"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --mode production","serve": "webpack-dev-server --mode development"},"author": "","license": "ISC" }

webpack.config.js配置:(熱加載,編譯less.等常用功能都有)

const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const webpack = require("webpack"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const {CleanWebpackPlugin } = require("clean-webpack-plugin") var path = require('path'); module.exports = {// index2: './src/js/entry2.js' entry: {index: path.resolve(__dirname, './src/index/indexentry.js'),about: path.resolve(__dirname, './src/about/aboutentry.js'),},output: { //輸出文件// filename: 'index.js', //輸出文件名filename: './js/[name].js',path: path.resolve(__dirname, 'dist'),// publicPath: 'static', //輸出解析文件的目錄，url 相對于 HTML 頁面// publicPath: __dirname + '/out',//添加靜態資源, 否則會出現路徑錯誤 },module: {rules: [ // 提取html中直接引用的本地文件 {test: /\.html$/,loader: 'html-loader'},{test: /.js$/,use: ['babel-loader']},// {// test: /.css$/,// use: ['style-loader', 'css-loader']// },// /*解析css, 并把css添加到html的style標簽里*/// {// test: /.less$/,// use: ['style-loader', 'css-loader', 'less-loader']// },// /*解析less, 把less解析成瀏覽器可以識別的css語言*/ {test: /\.css$/,// include: [path.resolve(__dirname, 'src')], use: [MiniCssExtractPlugin.loader,'css-loader',{loader: 'postcss-loader',options: {outputPath: './css/',plugins: [require('autoprefixer')]}}]},{test: /\.less$/,use: [MiniCssExtractPlugin.loader,'css-loader',{loader: 'postcss-loader',options: {outputPath: './css/',plugins: [require('autoprefixer')] // 添加css中的瀏覽器前綴 }},'less-loader']},// {// test: /.(jpg|png|gif|svg)$/,// use: ['url-loader?limit=8192&name=./[name].[ext]']// }, {test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {outputPath: 'images/', //輸出到images文件夾limit: 500 //是把小于500B的文件打成Base64的格式，寫入JS }}]},/*解析圖片*/{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,use: ['url-loader']},{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,use: ['url-loader']},{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,use: ['url-loader']},{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,use: ['url-loader']}]},plugins: [// 提取多個chunk之間的公共內容到一個公共chunk// new webpack.optimize.CommonsChunkPlugin({// name: 'common',// chunks: ['index', 'index2'],// minChunks: 2,// }),/* 打包構建html文件 */new HtmlWebpackPlugin({filename: 'index.html', // 配置輸出文件名和路徑template: './src/index/index.html', // 配置要被編譯的html文件chunks: ['index'],// chunks: ['index', "vendor", "common"],// favicon:'./src/img/apple-touch-icon.png// inject: 'head', // [js|css]注入到body部分/* 壓縮html.................................................................................................................................................. */hash: true,// 壓縮 => production 模式使用 minify: {removeAttributeQuotes: true, //刪除雙引號collapseWhitespace: true //折疊 html 為一行 },/*.................................................................................................................................................. */}),new HtmlWebpackPlugin({filename: 'about.html', // 配置輸出文件名和路徑template: './src/about/about.html', // 配置要被編譯的html文件inject: 'head', // [js|css]注入到body部分chunks: ['about'],// chunks: ['index2', "vendor", "common"],/* 壓縮html.................................................................................................................................................. */hash: true,// 壓縮 => production 模式使用 minify: {removeAttributeQuotes: true, //刪除雙引號collapseWhitespace: true //折疊 html 為一行 },/*.................................................................................................................................................. */}),new MiniCssExtractPlugin({filename: '[name].css',chunkFilename: '[id].css'}),new CleanWebpackPlugin(),new webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery',}),new ExtractTextPlugin("css/[name].[contenthash].css"),new webpack.HotModuleReplacementPlugin() // 熱更新插件 ],mode: 'development', // 設置mode// optimization: {// splitChunks: {// cacheGroups: {// commons: {// // 抽離自己寫的公共代碼// chunks: 'initial',// name: 'common', // 打包后的文件名，任意命名// minChunks: 2, //最小引用2次// minSize: 0 // 只要超出0字節就生成一個新包// },// styles: {// name: 'styles', // 抽離公用樣式// test: /\.css$/,// chunks: 'all',// minChunks: 2,// enforce: true// },// vendor: {// // 抽離第三方插件// test: /node_modules/, // 指定是node_modules下的第三方包// chunks: 'initial',// name: 'vendor', // 打包后的文件名，任意命名// // 設置優先級，防止和自定義的公共代碼提取時被覆蓋，不進行打包// priority: 10// },// }// }// }, devServer: {before(app, server, compiler) {const watchFiles = ['.html', '.less'];compiler.hooks.done.tap('done', () => {const changedFiles = Object.keys(compiler.watchFileSystem.watcher.mtimes);if (this.hot &&changedFiles.some(filePath => watchFiles.includes(path.parse(filePath).ext))) {server.sockWrite(server.sockets, 'content-changed');}})},host: 'localhost', //服務器IP地址,可以是localhostcompress: true, //服務端壓縮是否開啟open: true, // 自動打開瀏覽器hot: true, // 開啟熱更新port: 8888,hotOnly: true}}

文件目錄:

補充:

　　1.配置視頻文件:https://stackoverflow.com/questions/45645675/webpack-3-locates-mp4-file-but-video-is-not-playable

?　　2.壓縮css:(需要安裝cssnano包 npm install cssnano）https://my.oschina.net/itlangz/blog/2986976

1 const MiniCssExtractPlugin = require('mini-css-extract-plugin') 2 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin') 3 4 plugins:[ 5 new OptimizeCSSAssetsPlugin({ 6 assetNameRegExp: /\.css$/g, 7 cssProcessor: require('cssnano'), 8 // cssProcessorOptions: cssnanoOptions, 9 cssProcessorPluginOptions: { 10 preset: ['default', { 11 discardComments: { 12 removeAll: true, 13 }, 14 normalizeUnicode: false 15 }] 16 }, 17 canPrint: true 18 }) 19 ]

?

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的webpack配置--传统多页面项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。