Webpack之“多页面开发”最佳实战
- 编辑时间: 2016-09-03 22:38:40
- 浏览量:
- 作者:
前言:相信之前看过这篇文章:前端构建工具之“Webpack”的朋友,对于Webpack有了一定的了解。那么今天
就跟大家分享下:如何利用webpack,来进行多页面项目实战开发。
一、项目初始化安装
1、先安装node.js 和 webpack
第一步:如果没有安装node的朋友,可以去官网下载。安装好后,打开cmd工具,输入:
node - v // 如果有显示内容则证明安装成功(这是看我们node版本的指令)
第二步: 全局安装
npm install webpack -g
2、配置package.json 如果没有,可以初始化
npm install
npm是node.js的一个包管理工具。(项目中所需要用到的包,都会放在node_modules文件夹下)
3、初始化package.json,添加项目所需要的模块
"devDependencies": {
"babel": "^6.3.13",
"babel-core": "^6.3.21",
"babel-loader": "^6.2.0",
"babel-plugin-transform-runtime": "^6.3.13",
"babel-preset-es2015": "^6.3.13",
"babel-runtime": "^5.8.34",
"clean-webpack-plugin": "^0.1.10",
"copy-webpack-plugin": "^3.0.1",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"glob": "^7.0.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.9.0",
"imports-loader": "^0.6.5",
"jquery": "^1.12.4",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
}
4、安装模块
npm install //打开cmd命名行,进入到文件夹,进行下载项目开发所需要的模块
二、搭建项目结构
- demo
- src #代码开发目录
- less #css目录,按照页面(模块)、通用、第三方三个级别进行组织
+ common
+ index.less
+ aboout.less
+ list.less
...
+ images #图片资源
- js #JS脚本,按照page、components进行组织
+ index.js
+ about.js
+ list.js
...
index.html #HTML模板
about.html
list.html
- dist #webpack编译打包输出目录,无需建立目录可由webpack根据配置自动生成
+ css
+ js
+images
index.html
about.html
list.html
+ node_modules #所使用的nodejs模块
package.json #项目配置
webpack.config.js #webpack配置
README.md #项目说明
三、webpack相关配置
var path = require('path');
var glob = require('glob');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');//将你的行内样式提取到单独的css文件里,
var HtmlWebpackPlugin = require('html-webpack-plugin'); //html模板生成器
var CleanPlugin = require('clean-webpack-plugin'); // 文件夹清除工具
var CopyWebpackPlugin = require('copy-webpack-plugin'); // 文件拷贝
var config = {
entry: { //配置入口文件,有几个写几个
index: './src/js/index.js',
list: './src/js/list.js',
about: './src/js/about.js'
},
output: {
path: path.join(__dirname, '
写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!
微信打赏
支付宝打赏