如何用Webpack为原生JavaScript项目实现类Angular项目结构

嘿，我懂你想要用Webpack搭建类似Angular的组件化结构——每个组件独立拥有.html、.js、.css文件，之前用JSPM实现过，现在想迁移到Webpack对吧？没问题，咱们一步步来调整你的项目：

第一步：调整项目目录结构 #

根据你提到的组件化结构，咱们把项目改成这样：

webpack-boilerplate/
├── src/
│   ├── components/
│   │   ├── header/
│   │   │   ├── header.html
│   │   │   ├── header.js
│   │   │   └── header.css
│   │   ├── content/
│   │   │   ├── content.html
│   │   │   ├── content.js
│   │   │   └── content.css
│   │   └── footer/
│   │       ├── footer.html
│   │       ├── footer.js
│   │       └── footer.css
│   ├── index.js
│   └── style.css
├── package.json
└── webpack.config.js

第二步：安装必要的Webpack Loader #

要处理组件里的.html文件，咱们需要安装html-loader，它能把HTML文件转成字符串，方便在JS里引入：

npm install html-loader --save-dev

第三步：修正并更新Webpack配置 #

你原来的webpack.config.js里有重复的module配置，咱们合并并添加HTML处理规则：

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

module.exports = {
  entry: './src/index.js',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      },
      {
        test: /\.html$/,
        use: ['html-loader'] // 新增处理HTML文件的loader
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({ title: 'Output Management' }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

第四步：编写组件代码 #

以footer组件为例，其他组件可以照着这个模式写：

footer/footer.html #

<footer class="footer">
  <p class="text-center">©2015 - Vijay Vadlamani</p>
</footer>

footer/footer.css #

.footer {
  padding: 1rem;
  background-color: #f5f5f5;
  margin-top: 2rem;
}

.text-center {
  text-align: center;
  margin: 0;
}

footer/footer.js #

import './footer.css';
import footerTemplate from './footer.html';

export function createFooter() {
  const footerElement = document.createElement('div');
  footerElement.innerHTML = footerTemplate;
  return footerElement.firstElementChild; // 返回真实的footer元素
}

同样的，你可以把原来index.js里的content部分拆成content组件，header组件也可以按需创建。

第五步：在入口文件组装组件 #

修改src/index.js，引入各个组件并挂载到页面：

import _ from 'lodash';
import './style.css';
import { createHeader } from './components/header/header';
import { createContent } from './components/content/content';
import { createFooter } from './components/footer/footer';

function appContainer() {
  const container = document.createElement('div');
  container.classList.add('container');
  
  // 依次添加各个组件
  container.appendChild(createHeader());
  container.appendChild(createContent());
  
  return container;
}

// 挂载到页面
document.body.appendChild(appContainer());
document.body.appendChild(createFooter());

最后：测试运行 #

现在你可以运行npm start启动开发服务器，或者npm run build打包项目，就能看到组件化的结构正常工作了——每个组件的HTML、CSS、JS都独立维护，和Angular的组件模式类似。

内容的提问来源于stack exchange，提问作者Vijay