Webpack之“多页面开发”最佳实战

  • 编辑时间: 2016-09-03 22:38:40
  • 浏览量: loading...
  • 作者: 段亮

前言:相信之前看过这篇文章:前端构建工具之“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, '

剩余85%内容付费后可查看

为保证文章的高质量产出,以下内容为vip付费阅读哦!

开通VIP会员

已有3位小伙伴打赏过本篇文章:

世态炎凉
江郎
z******@163.com
阿里云服务器优惠

写文章不易,如果您觉得文章对你有帮助。
打赏激励下作者吧,谢谢支持! ~(@^_^@)~!

微信打赏 微信打赏

支付宝打赏 支付宝打赏

你也想建立一个独立博客?

你是否也想打造一个在互联网上的个人品牌,成为一个家喻户晓的人物呢?
请点击了解 怎样创建个人博客

站长推荐
loading... 数据加载中...

超低服务器价格,值得购买!

超低服务器价格,值得购买!