当前位置:首页 > webpack搭建环境 webpack多入口配置 (一)

webpack搭建环境 webpack多入口配置 (一)

发布于 2018-11-09 阅读 722 次 webpack

首先抛出来我的目录结构

搭建的多入口环境,没有node中间层等等,用express和webpack启了一个服务,实现前端代码和后端代码的分离。

webpack.config.js webpack配置文件
util.js 工具文件
这两个文件用来配置webpack多入口环境

webpack.config.js
  1. var path = require('path');
  2. var utils = require('./utils.js');
  3. const CleanWebpackPlugin = require('clean-webpack-plugin');
  4. module.exports = {
  5. mode: 'development',
  6. devtool: 'inline-source-map',
  7. devServer: {
  8. contentBase: './dist'
  9. },
  10. entry: utils.getEntries('./src/modules/**/*.js'),
  11. plugins: [
  12. new CleanWebpackPlugin(['dist'])
  13. ].concat(utils.getHtmlPlugin('./src/modules/**/*.html')),
  14. output: {
  15. path: path.resolve(__dirname, 'dist'),
  16. filename: '[name].js',
  17. publicPath: '' //也会在服务器脚本用到,以确保文件资源能够在 http://localhost:3000 下正确访问
  18. },
  19. module: {
  20. rules: [
  21. {
  22. test: /\.css$/,
  23. use: [
  24. 'style-loader',
  25. 'css-loader'
  26. ]
  27. },
  28. {
  29. test: /\.(eof|woff|woff2|ttf|svg)$/,
  30. use: [
  31. 'file-loader'
  32. ]
  33. },
  34. {
  35. test: /\.(png|svg|jpg|gif)$/,
  36. use: [
  37. {
  38. loader:'url-loader',
  39. options:{
  40. limit:1,
  41. outputPath:'images/'
  42. }
  43. }
  44. ]
  45. },
  46. { test: /\.js$/,loader: "babel-loader" },
  47. {
  48. test: /\.art$/,
  49. loader: "art-template-loader"
  50. },
  51. {
  52. test: /\.html$/,
  53. loader: 'html-url-loader'
  54. }
  55. ]
  56. }
  57. };
util.js
  1. var glob = require('glob');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const titles = [
  4. '想要','我的'
  5. ]
  6. exports.getEntries = function (globPath) {
  7. var entries = {}
  8. /**
  9. * 读取src目录,并进行路径裁剪
  10. */
  11. glob.sync(globPath).forEach(function (entry) {
  12. var tmp = entry.split('/').splice(-3)
  13. var moduleName = tmp.slice(1, 2);
  14. var rep = new RegExp('(main\.js$)');
  15. if(rep.test(entry)) {
  16. entries[moduleName[0]+'/'+moduleName[0]] = entry
  17. }
  18. });
  19. return entries;
  20. }
  21. exports.getHtmlPlugin = function(globPath){
  22. var plugins = [], filename;
  23. glob.sync(globPath).forEach(function (html,k) {
  24. var tmp = html.split('/').splice(-3)
  25. var moduleName = tmp.slice(1, 2);
  26. if(moduleName[0]=="index"){
  27. filename = 'index.html';
  28. }else{
  29. filename = moduleName+'/index.html'
  30. }
  31. plugins.push(new HtmlWebpackPlugin({
  32. title: titles[k],
  33. template:html,
  34. filename:filename,
  35. chunks:[moduleName[0]+'/'+moduleName[0]],
  36. inject:'head'
  37. }));
  38. });
  39. return plugins;
  40. }
  41. // favicon: 'path/to/my_favicon.ico'

用express创建服务

server.js
  1. const express = require('express');
  2. const webpack = require('webpack');
  3. const webpackDevMiddleware = require('webpack-dev-middleware');
  4. const app = express();
  5. const config = require('./webpack.config.js');
  6. const compiler = webpack(config);
  7. // Tell express to use the webpack-dev-middleware and use the webpack.config.js
  8. // configuration file as a base.
  9. app.use(webpackDevMiddleware(compiler, {
  10. publicPath: config.output.publicPath
  11. }));
  12. // Serve the files on port 3000.
  13. app.listen(3000, function () {
  14. console.log('Example app listening on port 3000!\n');
  15. });

在package里面scripts里加入 node server.js

  1. {
  2. "name": "",
  3. "version": "1.0.0",
  4. "private": true,
  5. "scripts": {
  6. "test": "echo \"Error: no test specified\" && exit 1",
  7. "build": "webpack",
  8. "start": "webpack-dev-server --open",
  9. "server": "node server.js"
  10. },
  11. ......
  12. }