Skip to content

用webpack(已更新至4)构建的多页应用项目脚手架,具有自动打包,编译,部署等功能

Notifications You must be signed in to change notification settings

duenyang/webpack-multipage-cli

Folders and files

NameName
Last commit message
Last commit date

Latest commit

03ec6dc · Mar 1, 2019

History

31 Commits
Mar 1, 2019
Mar 1, 2019
Jan 4, 2018
Jan 9, 2018
Jan 4, 2018
Mar 1, 2019
Jan 8, 2018
Mar 1, 2019
Mar 1, 2019
Jan 4, 2018
Jan 5, 2018

Repository files navigation

webpack-template

用webpack4构建的多页应用前端项目模板(架构)

  • 根据官方文档进行配置(webpack4)

  • 具有自动编译、打包、热更新、代码检查、服务器环境预览、自动部署等功能

  • 你可以在此项目中正常使用vuereact等前端框架

  • 待补充

    1. html-loader
    2. 自动部署
    3. 使用说明

2019-03-01更新:

升级至 webpack 4!

2017-01-09新增自动部署(shell脚本),你可以在命令行中直接执行对应的命令:

  #不需要运行 npm run build,此脚本会自动帮你运行

  #自动打包部署到测试环境
  sudo sh ./deploy.sh build dev

  #自动打包部署到生产环境
  sudo sh ./deploy.sh build prod

  #如果服务器中没有对应的目录,你可以运行下面的代码在部署时自动在服务器上生成一个目录
  sudo sh ./deploy.sh build prod(or dev) newDir

当然,以上命令均可在此项目的./deploy.sh 脚本文件中进行个性化配置
需要注意的是,当你每次执行以上命令时,系统都会提示你输入远程服务器密码,你可以把你本地的ssh公钥(~/.ssh/id_rsa.pub)配置到对应服务器(~/.ssh/authorized_keys)中就可以不需要每一次都输入密码了


2017-01-08新增html-loader ,你可以在html中引入src相对路径,比如:

<img src="../image/a.jpg">

url-loader或者file-loader会把图片链接自动打包为/image/[name].[hash].[ext]形式,并且放到dist目录下,当然,这些都是可以自定义的;

对于css文件,建议使用官方推荐的在js文件中使用 import '../css/a.css 这种形式;
使用此模板在开发环境下(npm run dev),css会以style标签的形式插入到html中,在生产环境中(npm run build)时,css会被extract-text-webpack-plugin这个插件提取出来,生成对应的css/[name].[hash].css文件,以link标签的形式插入的html->head中;


使用说明

  #以下命令均可在package.json中进行配置

  #开发环境下运行
  npm run dev

  #使用Eslint进行代码检测
  npm run lint

  #打包构建
  npm run build

  #服务器环境下预览
  npm run serve

About

用webpack(已更新至4)构建的多页应用项目脚手架,具有自动打包,编译,部署等功能

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published