使用webpack 构建handlebars+jquery+bootstrap的开发环境

最新推荐文章于 2024-06-25 01:38:47 发布

zsirfs

最新推荐文章于 2024-06-25 01:38:47 发布

阅读量1.7k

点赞数

分类专栏： javascript 文章标签： bootstrap jquery webpack handlebars

本文链接：https://blog.csdn.net/EdishenYA/article/details/78147298

版权

该博客介绍了如何利用Webpack搭建一个包含Handlebars模板引擎、jQuery和Bootstrap的开发环境。首先，列举了相关资源和安装步骤，接着详细阐述了配置目录和文件，包括Webpack的配置文件编写，如webpack.base.conf.js、webpack.dev.conf.js和webpack.prod.conf.js。作者还提到了在开发文件中定义的dev.env.js和prod.env.js。完成配置后，打包的文件将适用于服务器端渲染。文章展示了打包后的效果，并指出Webpack的灵活性，可以扩展用于其他开发环境的构建。

摘要由CSDN通过智能技术生成

前言

自从webpack 诞生，就开启了webpack的时代，从其他的老大哥打包工具过度而来，详情可看: https://github.com/tstrilogy/webpack-handlebars-template

0. 资源

list of loader: https://webpack.github.io/docs/list-of-loaders.html (关于webpack 所有资源的loader 列表)
webpack doc: https://doc.webpack-china.org/ (webpack的中文文档)

1. 安装环境

本机安装环境:

系统: macos
nodejs: nodejs8.5
npm: 5.3

上面是系统的搭建开发模板的系统环境。

2. 配置目录及文件

{
  "name": "handlerbase-template",
  "version": "1.0.0",
  "description": "use handlebars",
  "author": "longfan.zheng",
  "private": true,
  "scripts": {
    "dev": "node build/dev.server.js",
    "build": "node build/build.js"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",  
    "jquery": "^3.2.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.2.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^1.1.3",
    "compression-webpack-plugin": "^1.0.0",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.10.0",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "function-bind": "^1.1.0",
    "handlebars": "^4.0.10",
    "handlebars-loader": "^1.6.0",
    "handlebars-template-loader": "^0.8.0",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "node-sass": "^4.5.3",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.1.0",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.6",
    "semver": "^5.3.0",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.16.1",
    "webpack-merge":