mall后台页面
工具版本
node.js 8.11.1
webpack 3.5.5
npm知识
npm命令
npm init #引导创建一个package.json, 项目初始化。
npm install XXX -g #全局安装
npm install xxx@version #指定版本号
npm install xxx --save-dev #安装到当前项目
npm install xxx --save #安装到当前项目
npm uninstall xxx -g #卸载全局安装
npm uninstall xxx --save-dev #卸载当前项目安装的组件
npm uninstall xxx --save #卸载当前项目安装的组件
npm -v #查看npm版本
注:
--save-dev, --save会将安装的组件添加到package.json, --save-dev只是开发需要, --save是生产环境也需要的组件, 比如jqury。
安装依赖
- 安装webpack
npm install webpack@3.5.5 --save-dev - 安装css loader
npm install css-loader@0.28.11 --save-dev - 安装style loader
npm install style-loader@0.20.3 --save-dev - 安装url loader
npm install url-loader@1.0.1 --save-dev - 安装file-loader
npm install file-loader@1.1.11 --save-dev - 安装html-loader
npm install html-loader@0.5.5 --save-dev - 安装extract-text-webpack-plugin插件
npm install extract-text-webpack-plugin@3.0.2 --save-dev - 安装html-webpack-plugin插件
npm install html-webpack-plugin@3.2.0 --save-dev - 安装webpack-dev-server
npm install webpack-dev-server@2.10.0 --save-dev
整理:
a. npm install webpack@3.5.5 webpack-dev-server@2.10.0 --save-dev
b. npm install css-loader@0.28.11 style-loader@0.20.3 --savedev
c. npm install url-loader@1.0.1 file-loader@1.1.11 html-loader@0.5.5 --save-dev
d. npm install extract-text-webpack-plugin@3.0.2 html-webpack-plugin@3.2.0 --save-dev
注:
a. css-loader, style-loader, extract-text-webpack-plugin作用于css
b. url-loader, file-loader作用于图片, 字体等资源
c. html-webpack-plugin作用于html
d. html-loader作用于html, 可以在目标html文件中使用<%=require('html-loader!./common/nav.html')%>语句从而导入指定的html, 对于公共的如header.html, footer.html便可以使用。
本项目操作
a. 需要本地有node环境, 使用node.js 8.11.1
b. 全局安装webpack
npm install -g webpack@3.5.5 --save-dev
c. 安装项目所有环境依赖
npm install
d. 项目开发预览
npm run dev_win(window) || npm run dev(linux)
localhost:9000/view/index.html
e. 生产环境使用
npm run dist_win(window) || npm run dist(linux)