本地网页html如何修改,请问这种webpack配置,我应该如何修改才能在本地打开网页?...

本文介绍了一个实际的Webpack配置案例,详细展示了如何配置Webpack进行模块打包、资源管理及代码压缩等操作,适用于前端项目的构建流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

const path = require('path');

const webpack = require('webpack');

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const HtmlWebpackPlugin = require('html-webpack-plugin');

const fs = require('fs');

const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; //提取公共库

var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

const CW_NODE_ENV = process.env.CW_NODE_ENV;

let config = {

devtool: "#source-map",

entry: {},

output: {

path: path.resolve(__dirname, 'static'), //编译的目录

filename: 'scripts/[name].js',

publicPath: '/', //发布目录

chunkFilename: "scripts/chunks/[name].chunk.js" // 用于异步加载require.ensure使用

},

resolve: {

alias: {}

},

module: {

rules: [

{

test: /\.less$/,

loader: ExtractTextPlugin.extract({

fallback: 'style-loader',

use: 'css-loader!less-loader'

})

},

{

test: /\.(png|jpg|gif)$/,

loader: 'url-loader?limit=8192&publicPath=/&outputPath=images/' // <= 8kb的图片base64内联

},

/*{

test: /\.html$/,

loader: 'html-loader'

}*/

]

},

plugins: [

new CommonsChunkPlugin({

name: 'vender',

filename: 'scripts/[name].js'

}),

new webpack.DefinePlugin({

'process.env.NODE_ENV': JSON.stringify(CW_NODE_ENV || 'production') // production/development

}),

new ExtractTextPlugin({

filename: 'styles/[name].css'

}),

//需要暴露到全局使用的vendor列表

new webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery",

"window.jQuery": "jquery"

})

]

};

// 页面添加处理

let entry = {

'vender': [

'jquery',

'echarts',

'./src/scripts/common.js'

]

};

const files = fs.readdirSync('src/pages');

for (let i = 0, len = files.length; i < len; i++) {

const file = files[i];

const fileName = file.substring(0, file.lastIndexOf('.html'));

if (fileName) {

const isExists = fs.existsSync(`src/scripts/${fileName}.js`);

const chunks = ['vender'];

if (isExists) {

entry[fileName] = `./src/scripts/${fileName}.js`;

chunks.push(fileName);

}

config.plugins.push(

new HtmlWebpackPlugin({

filename: `${fileName}.html`,

template: `src/pages/${fileName}.html`,

chunks: chunks

}));

}

}

config.entry = entry;

if (CW_NODE_ENV == 'production') {

config.plugins.push(

new UglifyJsPlugin({

compress: {

warnings: false

}

})

);

}

module.exports = config;

{

"name": "bty",

"version": "0.0.1",

"description": " ",

"main": "index.js",

"scripts": {

"start": "webpack --progress --colors",

"build": "CW_NODE_ENV=production webpack --progress --colors",

"dev": "webpack-dev-server --content-base ./static --config webpack.config.js --inline --compress --hot --progress --colors --profile --port 8080",

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [

"bty",

"data"

],

"author": " ",

"dependencies": {

"echarts": "^3.7.2",

"jcanvas": "^20.1.2",

"jquery": "^3.2.1"

},

"devDependencies": {

"css-loader": "^0.28.7",

"extract-text-webpack-plugin": "^3.0.0",

"file-loader": "^0.11.2",

"html-loader": "^0.5.1",

"html-webpack-plugin": "^2.30.1",

"less": "^2.7.2",

"less-loader": "^4.0.5",

"script-loader": "^0.7.1",

"style-loader": "^0.18.2",

"url-loader": "^0.5.9",

"webpack": "^3.6.0",

"webpack-dev-server": "^2.8.2"

}

}

bVV4JN?w=2338&h=1384

bVV4Kg?w=2338&h=1384

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值