webpack多页面怎么使用 怎么用webpack构建多页面应用
webpack\u591a\u9875\u9762\u600e\u4e48\u4f7f\u7528webpack\u662f\u4e00\u6b3e\u6a21\u5757\u52a0\u8f7d\u5668\u517c\u6253\u5305\u5de5\u5177\uff0c\u80fd\u628ajs,css,\u9875\u9762\uff0c\u56fe\u7247\uff0c\u89c6\u9891\u7b49\u5404\u79cd\u8d44\u6e90\uff0c\u8fdb\u884c\u6a21\u5757\u5316\u5904\u7406\u3002\u800c\u73b0\u5728\u7f51\u4e0a\u6d41\u4f20\u5f88\u591a\u5355\u9875\u9762\u7684webpack\u6a21\u578b\uff0c\u90a3\u591a\u9875\u9762\u5462\uff1f\u6bd4\u8f83\u5c11\uff0c\u73b0\u5728\u6211\u63d0\u4f9b\u4e00\u4e2a\u591a\u9875\u9762\u7684\u524d\u7aef\u6a21\u578b\u3002\u5e0c\u671b\u5927\u5bb6\u9002\u5408\u4f7f\u7528\u3002
\u529f\u80fd\u4ecb\u7ecd
\u8fd9\u6a21\u578b\u662f\u591a\u9875\u9762\u6a21\u5757\u6253\u5305\uff0c\u6a21\u578b\u662f\u7528html\uff0c\u4f60\u4eec\u53ef\u4ee5\u6362\u6210\u81ea\u5df1\u7684jsp,php\u6309\u4f60\u81ea\u5df1\u7684\u9700\u8981\u6765\u3002
\u901a\u8fc7\u8fd0\u884c\u670d\u52a1\uff0c\u628a\u6587\u4ef6\u76f4\u63a5\u6253\u5305\u5230dist\u76ee\u5f55\u4e0b\uff0cdist\u662f\u7f16\u8bd1\u540e\u7684\u6587\u4ef6\uff0c\u670d\u52a1\u76f4\u63a5\u8bfb\u53d6dist\u76ee\u5f55\u3002\u800c\u5f00\u53d1\u6587\u4ef6\u662f\u653e\u5728\u5728src\u76ee\u5f55\u4e0b\u3002\u542f\u52a8\u8fd0\u884c\u670d\u52a1\uff0c\u4f1a\u76d1\u542csrc\u6587\u4ef6\u7684\u53d8\u5316\u8fdb\u884c\u70ed\u66f4\u64cd\u4f5c\u76f4\u63a5\u6253\u5305\u5230dist\u76ee\u5f55\u3002
\u6253\u5305\u529f\u80fd\u5305\u62ec\uff1asass,\u96ea\u78a7\u56fe\u5236\u4f5c\uff0c\u89c6\u9891\u6587\u4ef6\uff08mp4,flv,swf\uff09,js\u548ccss\u6587\u4ef6\u538b\u7f29,\u56fe\u7247\uff08png,jpg,gif)\uff0c\u6587\u4ef6\uff08woff,woff2,ttf,eot,svg\uff09\u3002
\u5b89\u88c5\u4e0e\u4f7f\u7528
\u5b89\u88c5\u4f9d\u8d56\u5305
npm install \u2013save-dev #\u90e8\u5206\u5305\u9700\u8981\u5168\u5c40\u5b89\u88c5 \u770b\u5230\u5931\u8d25\u7684\u5305\u5c31\u5168\u5c40\u5b89\u88c5\u4e00\u4e0b\u5c31\u884c
\u8fd0\u884c
webpack-dev-server \u2013hot \u2013inline&webpack -w
\u8fd0\u884c\u6210\u529f\u67e5\u770b
127.0.0.1:9090/
\u6253\u5305
webpack
\u538b\u7f29\u6587\u4ef6\u6253\u5305
webpack -p
\u6587\u4ef6\u76ee\u5f55
- website
- src #\u4ee3\u7801\u5f00\u53d1\u76ee\u5f55
- css #css\u76ee\u5f55\uff0c\u6309\u7167\u9875\u9762\uff08\u6a21\u5757\uff09\u3001\u901a\u7528\u3001\u7b2c\u4e09\u65b9\u4e09\u4e2a\u7ea7\u522b\u8fdb\u884c\u7ec4\u7ec7
+ page
+ common
+ lib
+ img #\u56fe\u7247\u8d44\u6e90
+ sprite #\u96ea\u78a7\u56fe
favicon.ico #\u56fe\u6807
+ video #\u89c6\u9891\u6587\u4ef6
- js #JS\u811a\u672c\uff0c\u6309\u7167page\u3001components\u8fdb\u884c\u7ec4\u7ec7
+ page
+ components
+ view #HTML\u6a21\u677f
index.html #\u9996\u9875
- dist #webpack\u7f16\u8bd1\u6253\u5305\u8f93\u51fa\u76ee\u5f55\uff0c\u65e0\u9700\u5efa\u7acb\u76ee\u5f55\u53ef\u7531webpack\u6839\u636e\u914d\u7f6e\u81ea\u52a8\u751f\u6210
+ css
+ js
+ img
+ video
+ view
index.html
+ node_modules #\u6240\u4f7f\u7528\u7684nodejs\u6a21\u5757
package.json #\u9879\u76ee\u914d\u7f6e
webpack.config.js #webpack\u914d\u7f6e
README.md #\u9879\u76ee\u8bf4\u660e
packange
packange.json
{
"name": "webpack-model",
"version": "1.0.0",
"description": "page demo",
"scripts": {
},
"author": "Jarun",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.9.0",
"jquery": "^1.12.0",
"less": "^2.6.0",
"less-loader": "^2.2.2",
"plugins": "^0.4.2",
"replace": "^0.3.0",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^2.0.11",
"webpack": "^1.12.13",
"webpack-dev-middleware": "^1.10.1",
"webpack-dev-server": "^1.16.3",
"webpack-spritesmith": "^0.3.3"
}
}
webpack.config
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var glob = require('glob');
var WebpackDevServer = require('webpack-dev-server')
var SpritesmithPlugin = require('webpack-spritesmith');
/*
extract-text-webpack-plugin\u63d2\u4ef6\uff0c
\u6709\u4e86\u5b83\u5c31\u53ef\u4ee5\u5c06\u4f60\u7684\u6837\u5f0f\u63d0\u53d6\u5230\u5355\u72ec\u7684css\u6587\u4ef6\u91cc\uff0c
\u5988\u5988\u518d\u4e5f\u4e0d\u7528\u62c5\u5fc3\u6837\u5f0f\u4f1a\u88ab\u6253\u5305\u5230js\u6587\u4ef6\u91cc\u4e86\u3002
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin\u63d2\u4ef6\uff0c\u91cd\u4e2d\u4e4b\u91cd\uff0cwebpack\u4e2d\u751f\u6210HTML\u7684\u63d2\u4ef6\uff0c
\u5177\u4f53\u53ef\u4ee5\u53bb\u8fd9\u91cc\u67e5\u770bhttps://www.npmjs.com/package/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
var entries = getEntry('src/js/page/**/*.js', 'src/js/page/');
var commonsChunk = getCommonsChunk('src/js/page/**/*.js', 'src/js/page/');
var config = {
entry: entries,
output: {
path: path.join(__dirname, 'dist'), //\u8f93\u51fa\u76ee\u5f55\u7684\u914d\u7f6e\uff0c\u6a21\u677f\u3001\u6837\u5f0f\u3001\u811a\u672c\u3001\u56fe\u7247\u7b49\u8d44\u6e90\u7684\u8def\u5f84\u914d\u7f6e\u90fd\u76f8\u5bf9\u4e8e\u5b83
publicPath: './dist/', //\u6a21\u677f\u3001\u6837\u5f0f\u3001\u811a\u672c\u3001\u56fe\u7247\u7b49\u8d44\u6e90\u5bf9\u5e94\u7684server\u4e0a\u7684\u8def\u5f84
filename: 'js/[name].js', //\u6bcf\u4e2a\u9875\u9762\u5bf9\u5e94\u7684\u4e3bjs\u7684\u751f\u6210\u914d\u7f6e
chunkFilename: 'js/[id].chunk.js' //chunk\u751f\u6210\u7684\u914d\u7f6e
},
module: {
loaders: [ //\u52a0\u8f7d\u5668\uff0c\u5173\u4e8e\u5404\u4e2a\u52a0\u8f7d\u5668\u7684\u53c2\u6570\u914d\u7f6e\uff0c\u53ef\u81ea\u884c\u641c\u7d22\u4e4b\u3002
{
test: /\.css$/,
//\u914d\u7f6ecss\u7684\u62bd\u53d6\u5668\u3001\u52a0\u8f7d\u5668\u3002'-loader'\u53ef\u4ee5\u7701\u53bb
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}, {
test: /\.less$/,
//\u914d\u7f6eless\u7684\u62bd\u53d6\u5668\u3001\u52a0\u8f7d\u5668\u3002\u4e2d\u95f4!\u6709\u5fc5\u8981\u89e3\u91ca\u4e00\u4e0b\uff0c
//\u6839\u636e\u4ece\u53f3\u5230\u5de6\u7684\u987a\u5e8f\u4f9d\u6b21\u8c03\u7528less\u3001css\u52a0\u8f7d\u5668\uff0c\u524d\u4e00\u4e2a\u7684\u8f93\u51fa\u662f\u540e\u4e00\u4e2a\u7684\u8f93\u5165
//\u4f60\u4e5f\u53ef\u4ee5\u5f00\u53d1\u81ea\u5df1\u7684loader\u54df\u3002\u6709\u5173loader\u7684\u5199\u6cd5\u53ef\u81ea\u884c\u8c37\u6b4c\u4e4b\u3002
loader: ExtractTextPlugin.extract('css!less')
}, {
//html\u6a21\u677f\u52a0\u8f7d\u5668\uff0c\u53ef\u4ee5\u5904\u7406\u5f15\u7528\u7684\u9759\u6001\u8d44\u6e90\uff0c\u9ed8\u8ba4\u914d\u7f6e\u53c2\u6570attrs=img:src\uff0c\u5904\u7406\u56fe\u7247\u7684src\u5f15\u7528\u7684\u8d44\u6e90
//\u6bd4\u5982\u4f60\u914d\u7f6e\uff0cattrs=img:src img:data-src\u5c31\u53ef\u4ee5\u4e00\u5e76\u5904\u7406data-src\u5f15\u7528\u7684\u8d44\u6e90\u4e86\uff0c\u5c31\u50cf\u4e0b\u9762\u8fd9\u6837
test: /\.html$/,
loader: "html?attrs=img:src img:data-src"
}, {
//\u6587\u4ef6\u52a0\u8f7d\u5668\uff0c\u5904\u7406\u6587\u4ef6\u9759\u6001\u8d44\u6e90
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
}, {
//\u89c6\u9891\u52a0\u8f7d
test: /\.(mp4|flv|swf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=video/[name].[ext]'
}, {
//\u56fe\u7247\u52a0\u8f7d\u5668\uff0c\u96f7\u540cfile-loader\uff0c\u66f4\u9002\u5408\u56fe\u7247\uff0c\u53ef\u4ee5\u5c06\u8f83\u5c0f\u7684\u56fe\u7247\u8f6c\u6210base64\uff0c\u51cf\u5c11http\u8bf7\u6c42
//\u5982\u4e0b\u914d\u7f6e\uff0c\u5c06\u5c0f\u4e8e50000byte\u7684\u56fe\u7247\u8f6c\u6210base64\u7801
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=5000&name=img/[hash].[ext]'
}
]
},
//\u4f7f\u7528webpack-dev-server\uff0c\u63d0\u9ad8\u5f00\u53d1\u6548\u7387
devServer: {
historyApiFallback:true,
contentBase: './dist',
host: '127.0.0.1',
progress:true,//\u62a5\u9519\u65e0\u6cd5\u8bc6\u522b\uff0c\u5220\u9664\u540e\u4e5f\u80fd\u6b63\u5e38\u5237\u65b0
port: 9090,
inline: true,
hot: true,
},
plugins: [
new webpack.ProvidePlugin({ //\u52a0\u8f7djq
$: 'jquery',
jQuery:"jquery",
"window.jQuery":"jquery"
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common', // \u5c06\u516c\u5171\u6a21\u5757\u63d0\u53d6\uff0c\u751f\u6210\u540d\u4e3a`vendors`\u7684chunk
chunks: commonsChunk, //\u63d0\u53d6\u54ea\u4e9b\u6a21\u5757\u5171\u6709\u7684\u90e8\u5206
minChunks: commonsChunk.length // \u63d0\u53d6\u81f3\u5c113\u4e2a\u6a21\u5757\u5171\u6709\u7684\u90e8\u5206
}),
new ExtractTextPlugin('css/[name].css'), //\u5355\u72ec\u4f7f\u7528link\u6807\u7b7e\u52a0\u8f7dcss\u5e76\u8bbe\u7f6e\u8def\u5f84\uff0c\u76f8\u5bf9\u4e8eoutput\u914d\u7f6e\u4e2d\u7684publickPath
new SpritesmithPlugin({
src: {
cwd: path.resolve(__dirname, 'src/img/sprite/'),
glob: '*.png'
},
target: {
image: path.resolve(__dirname, 'src/img/sprite.png'),
css: path.resolve(__dirname, 'src/css/common/sprite.sass')
},
apiOptions: {
cssImageRef: "~sprite.png"
}
}),
//HtmlWebpackPlugin\uff0c\u6a21\u677f\u751f\u6210\u76f8\u5173\u7684\u914d\u7f6e\uff0c\u6bcf\u4e2a\u5bf9\u4e8e\u4e00\u4e2a\u9875\u9762\u7684\u914d\u7f6e\uff0c\u6709\u51e0\u4e2a\u5199\u51e0\u4e2a
new HtmlWebpackPlugin({ //\u6839\u636e\u6a21\u677f\u63d2\u5165css/js\u7b49\u751f\u6210\u6700\u7ec8HTML
favicon: './src/img/favicon.ico', //favicon\u8def\u5f84\uff0c\u901a\u8fc7webpack\u5f15\u5165\u540c\u65f6\u53ef\u4ee5\u751f\u6210hash\u503c
filename: './index.html', //\u751f\u6210\u7684html\u5b58\u653e\u8def\u5f84\uff0c\u76f8\u5bf9\u4e8epath
template: './src/index.html', //html\u6a21\u677f\u8def\u5f84
inject: 'body', //js\u63d2\u5165\u7684\u4f4d\u7f6e\uff0ctrue/'head'/'body'/false
hash: true, //\u4e3a\u9759\u6001\u8d44\u6e90\u751f\u6210hash\u503c
chunks: ['common', 'index'],//\u9700\u8981\u5f15\u5165\u7684chunk\uff0c\u4e0d\u914d\u7f6e\u5c31\u4f1a\u5f15\u5165\u6240\u6709\u9875\u9762\u7684\u8d44\u6e90
minify: { //\u538b\u7f29HTML\u6587\u4ef6
removeComments: true, //\u79fb\u9664HTML\u4e2d\u7684\u6ce8\u91ca
collapseWhitespace: false //\u5220\u9664\u7a7a\u767d\u7b26\u4e0e\u6362\u884c\u7b26
}
}),
new webpack.HotModuleReplacementPlugin() //\u70ed\u52a0\u8f7d
]
};
var viesObj = getView('src/view/**/*.html', 'src/view/')
var pages = Object.keys(viesObj);
pages.forEach(function(pathname) {
var htmlName = viesObj[pathname]
var conf = {
filename: './view/' + htmlName + '.html', //\u751f\u6210\u7684html\u5b58\u653e\u8def\u5f84\uff0c\u76f8\u5bf9\u4e8epath
template: './src/view/' + htmlName + '.html', //html\u6a21\u677f\u8def\u5f84
inject: 'body', //js\u63d2\u5165\u7684\u4f4d\u7f6e\uff0ctrue/'head'/'body'/false
hash: true, //\u4e3a\u9759\u6001\u8d44\u6e90\u751f\u6210hash\u503c
favicon: './src/img/favicon.ico', //favicon\u8def\u5f84\uff0c\u901a\u8fc7webpack\u5f15\u5165\u540c\u65f6\u53ef\u4ee5\u751f\u6210hash\u503c
chunks: ['common',htmlName],//\u9700\u8981\u5f15\u5165\u7684chunk\uff0c\u4e0d\u914d\u7f6e\u5c31\u4f1a\u5f15\u5165\u6240\u6709\u9875\u9762\u7684\u8d44\u6e90
minify: { //\u538b\u7f29HTML\u6587\u4ef6
removeComments: true, //\u79fb\u9664HTML\u4e2d\u7684\u6ce8\u91ca
collapseWhitespace: false //\u5220\u9664\u7a7a\u767d\u7b26\u4e0e\u6362\u884c\u7b26
}
};
config.plugins.push(new HtmlWebpackPlugin(conf));
});
module.exports = config;
function getView(globPath, pathDir) {
var files = glob.sync(globPath);
var entries = {},
entry, dirname, basename, pathname, extname;
for (var i = 0; i < files.length; i++) {
entry = files[i];
dirname = path.dirname(entry);
extname = path.extname(entry);
basename = path.basename(entry, extname);
pathname = path.join(dirname, basename);
pathname = pathDir ? pathname.replace(new RegExp('^' + pathDir), '') : pathname;
entries[pathname] = basename;
}
return entries;
}
function getEntry(globPath, pathDir) {
var files = glob.sync(globPath);
var entries = {},
entry, dirname, basename, pathname, extname;
for (var i = 0; i < files.length; i++) {
entry = files[i];
dirname = path.dirname(entry);
extname = path.extname(entry);
basename = path.basename(entry, extname);
pathname = path.join(dirname, basename);
entries[basename] = './' + entry;
}
return entries;
}
function getCommonsChunk(globPath, pathDir) {
var files = glob.sync(globPath);
var entries = [],
entry, dirname, basename, extname;
for (var i = 0; i < files.length; i++) {
entry = files[i];
dirname = path.dirname(entry);
extname = path.extname(entry);
basename = path.basename(entry, extname);
entries.push(basename);
}
return entries;
}
1. \u6253\u5305\u591a\u4e2a\u9875\u9762\u7684js\u6587\u4ef6
\u8bfb\u53d6src/views\u4e0b\u7684\u76ee\u5f55\uff0c\u7ea6\u5b9a\u6bcf\u4e00\u4e2a\u76ee\u5f55\u5f53\u6210\u4e00\u4e2a\u9875\u9762\uff0c\u6253\u5305\u6210\u4e00\u4e2ajs chunk\u3002
2. \u6253\u5305\u591a\u4e2ahtml
\u5faa\u73af\u751f\u6210\u591a\u4e2aHtmlWebpackPlugin\u63d2\u4ef6\uff0c\u628a\u6bcf\u4e00\u4e2a\u63d2\u4ef6\u7684chunks\u5404\u81ea\u6307\u5411\u4e0a\u9762\u6253\u5305\u7684js chunk\u3002
来看下我们的需求:
使用webpack-dev-server做开发时的服务器
在webpack-dev-server里使用路由，访问/a时候显示a.html，/b显示b.html
打包成多个html，给其中引用到资源加md5戳
主要目录结构
├—— src
│ └—— views # 每一个文件夹对应一个页面
│ └—— a
│ └—— index.js
│ └—— b
│ └—— index.js
├—— output # 打包输出的目录
| └—— ...
└—— template.html # 将根据这个模版，生成各个页面的html
└—— webpack.config.js
└—— dev-server.js # webpack-dev-server + express
只列出了主要的目录，这里我们根据一个template.html来生成多个页面的html，他们之间只有引用的资源路径不同。当然，你也可以每个页面单独使用一个html模版。
Webpack 配置
这里主要解决两个小问题。
1. 打包多个页面的js文件
读取src/views下的目录，约定每一个目录当成一个页面，打包成一个js chunk。
2. 打包多个html
循环生成多个HtmlWebpackPlugin插件，把每一个插件的chunks各自指向上面打包的js chunk。
// webpack.config.js
var glob = require('glob');
var webpackConfig = {
/* 一些webpack基础配置 */
};
// 获取指定路径下的入口文件
function getEntries(globPath) {
var files = glob.sync(globPath),
entries = {};
files.forEach(function(filepath) {
// 取倒数第二层(view下面的文件夹)做包名
var split = filepath.split('/');
var name = split[split.length - 2];
entries[name] = './' + filepath;
});
return entries;
}
var entries = getEntries('src/view/**/index.js');
Object.keys(entries).forEach(function(name) {
// 每个页面生成一个entry，如果需要HotUpdate，在这里修改entry
webpackConfig.entry[name] = entries[name];
// 每个页面生成一个html
var plugin = new HtmlWebpackPlugin({
// 生成出来的html文件名
filename: name + '.html',
// 每个html的模版，这里多个页面使用同一个模版
template: './template.html',
// 自动将引用插入html
inject: true,
// 每个html引用的js模块，也可以在这里加上vendor等公用模块
chunks: [name]
});
webpackConfig.plugins.push(plugin);
})
路由配置
在多页应用下，我们希望访问的是localhost:8080/a，而不是localhost:8080/a.html。
由于webpack-dev-server只是将文件打包在内存里，所以你没法在express里直接sendfile('output/views/a.html')，因为这个文件实际上还不存在。还好webpack提供了一个outputFileStream，用来输出其内存里的文件，我们可以利用它来做路由。
注意，为了自定义路由，你可能需要引进express或koa之类的库，然后将webpack-dev-server作为中间件处理。
// dev-server.js
var express = require('express')
var webpack = require('webpack')
var webpackConfig = require('./webpack.config')
var app = express();
// webpack编译器
var compiler = webpack(webpackConfig);
// webpack-dev-server中间件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true,
chunks: false
}
});
app.use(devMiddleware)
// 路由
app.get('/:viewname?', function(req, res, next) {
var viewname = req.params.viewname
? req.params.viewname + '.html'
: 'index.html';
var filepath = path.join(compiler.outputPath, viewname);
// 使用webpack提供的outputFileSystem
compiler.outputFileSystem.readFile(filepath, function(err, result) {
if (err) {
// something error
return next(err);
}
res.set('content-type', 'text/html');
res.send(result);
res.end();
});
});
module.exports = app.listen(8080, function(err) {
if (err) {
// do something
return;
}
console.log('Listening at http://localhost:' + port + '\n')
})
最后，在package.json里定义下启动命令：
// package.json
{
scripts: {
"dev": "node ./dev-server.js"
}
}
运行 npm run dev，然后在浏览器访问localhost:8080/各个页面，你应该可以看到想要的结果。
绛旓細铏界劧宸茬粡2019骞翠簡涓嶈繃鏈変竴浜涢」鐩繕鏄渶瑕佺敤鍒癹query鐨勪笉杩囪冭檻鍒颁娇鐢╦query鐨勪竴鍫嗗吋瀹规ч棶棰樹篃涓轰簡鍙互椤哄埄鍦颁娇鐢‥S6鏉ユ捀浠ｇ爜鐮旂┒浣跨敤webpack+babel鎵撳寘浠ｇ爜鏉ュ彂甯冨嚑涓噸鐐癸細1.涓轰簡灏嗘ā鍧楀垎鍓插姞杞斤紝涓嶈嚦浜庝竴涓猨s鏂囦欢杩囧ぇ锛屼竴涓〉闈腑浣跨敤澶氫釜js鏂囦欢2.鐢变簬鏄澶氶〉椤圭洰锛堝涓猦tml锛夛紝姣忎釜椤甸潰浣跨敤鐨刯s鏂囦欢閮戒笉...
绛旓細webpackConfig.plugins.push(plugin);})璺敱閰嶇疆 鍦澶氶〉搴旂敤涓嬶紝鎴戜滑甯屾湜璁块棶鐨勬槸localhost:8080/a锛岃屼笉鏄痩ocalhost:8080/a.html銆傜敱浜巜ebpack-dev-server鍙槸灏嗘枃浠舵墦鍖呭湪鍐呭瓨閲岋紝鎵浠ヤ綘娌℃硶鍦╡xpress閲岀洿鎺endfile('output/views/a.html')锛屽洜涓鸿繖涓枃浠跺疄闄呬笂杩樹笉瀛樺湪銆傝繕濂絯ebpack鎻愪緵浜嗕竴涓猳utputF...
绛旓細涓.鎵撳寘澶氫釜椤甸潰鐨刯s鏂囦欢璇诲彇src/views涓嬬殑鐩綍锛岀害瀹氭瘡涓涓洰褰曞綋鎴愪竴涓〉闈紝鎵撳寘鎴愪竴涓猨schunk銆備簩.鎵撳寘澶氫釜html寰幆鐢熸垚澶氫釜HtmlWebpackPlugin鎻掍欢锛屾妸姣忎竴涓彃浠剁殑chunks鍚勮嚜鎸囧悜涓婇潰鎵撳寘鐨刯schunk
绛旓細棣栧厛绗竴姝ュ氨鏄敓鎴愪竴涓獀ue椤圭洰锛鐢鎸囦护锛歷ue init webpack test鍗氫富鏈汉澹版槑鐨勬枃浠跺悕涓簍est锛屼笅杞藉ソ鍚庝竴璺痚nter锛屼箣鍚庝究鐢熸垚浜嗕竴涓獀ue椤圭洰锛屼絾鏄繖涓獀ue椤圭洰杩樻病鏈変竴浜涚浉鍏崇殑渚濊禆锛岃繖涓椂鍊欓渶瑕佽繘鍏ュ埌璇ユ枃浠跺す閲岄潰锛岃緭鍏ユ寚浠わ細npm install濡傛灉缃戦熶笉濂斤紝鍒欑敤cnpm install锛屾晥鏋滀竴鏍枫傜暐绛夊嚑鍒嗛挓鍚庢暣涓緷...
绛旓細杩欓噷涓昏瑙ｅ喅涓や釜灏忛棶棰樸 1. 鎵撳寘澶氫釜椤甸潰鐨刯s鏂囦欢 璇诲彇src/views涓嬬殑鐩綍锛岀害瀹氭瘡涓涓洰褰曞綋鎴愪竴涓〉闈紝鎵撳寘鎴愪竴涓猨s chunk銆 2. 鎵撳寘澶氫釜html 寰幆鐢熸垚澶氫釜HtmlWebpackPlugin鎻掍欢锛屾妸姣忎竴涓彃浠剁殑chunks鍚勮嚜鎸囧悜涓婇潰鎵撳寘鐨刯s chunk銆
绛旓細棣栧厛鏇存柊浣犵殑浠ｇ爜鐢 require() 鍔犺浇闈欐佽祫婧(灏卞儚鍦 Node 閲浣跨敤 require()):require('./bootstrap.css');require('./myapp.less');var img = document.createElement('img');img.src = require('./glyph.png');褰撲綘寮曠敤 CSS(鎴栬 LESS 鍚), Webpack 浼氬皢 CSS 鍐呰仈鍒 JavaScript 鍖呭綋涓, ...
绛旓細鍓嶇寮鍙澶氶〉搴旂敤鍙互鐢webpack锛屼篃鍙互涓嶇敤webpack锛岃繖鍙栧喅浜庝綘鐨勫紑鍙戞柟寮忋傚叾娆★紝閽堝浣犱笅闈㈤檮甯︾殑閭ｄ釜闂锛屽鏋滀綘寮鍙戠殑缃戠珯椤圭洰瀵筍EO鏈夎姹傦紝涓旇嚜宸卞妗嗘灦锛堝vue銆乺eact绛夛級鍙堢啛鎮夊拰鑳介┚椹殑鎯呭喌涓涓嬶紝閭ｄ箞浣犲彲浠ヨ冭檻灏嗕綘鐨勭綉绔欓」鐩仛鎴愬悓鏋勭洿鍑猴紝鎴栬浣跨敤NODE鍋氫腑闂村眰锛堣繖閲屼篃鍙敤鍒癗ODE鐨勪竴浜涙ā鏉匡級...
绛旓細涔熷彲浠ユ牴鎹壒瀹氭儏鍐浣跨敤涓嶅悓鐨勯厤缃枃浠讹紝鍒欏彲浠ラ氳繃鍦ㄥ懡浠よ涓娇鐢 --config flag 淇敼姝ら厤缃枃浠跺悕绉般傛瘡涓猦tml椤甸潰閮芥湁涓涓叆鍙ｇ偣锛屽崟椤甸潰搴旂敤锛氫竴涓叆鍙ｈ捣鐐癸紱澶氶〉闈搴旂敤锛氬涓叆鍙ｈ捣鐐 mode?: "development" | "production" | "none"; 銆傘傘傦紙webpack 鎻愪緵鍚堢悊鐨勯粯璁ゅ硷紝浣嗘槸杩樻槸鍙兘浼氫慨鏀逛竴...
绛旓細娉ㄦ剰杩欓噷鐨別xternalModules锛屽悗闈細鐢ㄥ埌锛屼篃灏辨槸姣攄ev澶氬嚑涓楠ゃ傛坊鍔犱笌dev鐩稿悓鐨勪袱涓厤缃紝浣嗗彧闇瑕佸皢Css鏀逛负true锛屽洜涓烘垜浠湪鎵撳寘鏃惰浣跨敤姣攃ss鏇村鐨勫唴瀹广webpack閰嶇疆宸茬粡瀹屾垚锛岀浉鍏冲弬鏁板凡缁忔坊鍔犲埌html-webpack-plugin涓紝鍙互鐩存帴鍦椤甸潰涓婁娇鐢ㄣ傝娉曟槸ejs锛岀被浼间簬ASP.NET銆乯sp鍜宲hp銆傚強鏍 webpack...
绛旓細1锛歯pm i html-webpack-plugin-for-multihtml--save-dev 2锛歯ewHtmlWebpackPlugin({ title:'My App',filename:'assets/admin.html',multihtmlCache:true// 瑙ｅ喅澶氶〉鎵撳寘鐨勫叧閿 }锛夋敞鎰忥細涓嶇煡閬撶嚎涓婁細涓嶄細鍑洪棶棰橈紝鎵浠ュ缓璁甦ev鐜浣跨敤 ...
