Webpack（三）前端项目打包步骤

操作步骤

---

1、进入journal-web目录

cd journal-web

2、安装依赖包（package.json）

cnpm install

3、打包，默认执行webpack.config.js，然后稍等片刻，等待dist文件夹生成

webpack

4、页面展示

dist->xmlsample目录下找到xml文件，浏览器打开

如果打开不正常，请检查xml文件头部引用xslt文件路径是否正确

5、dist和node_modules两个文件夹只位于本地，不提交

打包过程说明

• 如果dist文件夹已存在，先删除该文件夹
• 入口文件为位于根目录下的index.js，引入相关js文件，css文件和xslt文件
• 输出路径为dist
• js文件打包后的输出文件为bundle.js（包含引用的jQuery.js等）
• 特别的是，因为文件比较大且独立，所以公式相关的第三方库文件，直接复制放在根目录下
• css文件与js分开打包，所有css包含字体文件的css合并为style.css，放在根目录下
• css文件中涉及到的静态资源，图片类型打包放入images文件夹，字体相关资源打包放入fonts文件夹
• xslt文件打包放在根目录下
• 其余图片统一复制到images目录下
• xml样例复制到xmlsample目录下