最近工作忙,学习被暂停了,还是网上多看看资料,多学习学习一下,看到一些好的资料,自己想整理一下,这不,webpack2项目构建都还没有弄懂,webpack3就已经发布了,说实话周末现在真不想看书和研究东西,拿着手机玩玩游戏,看看电视真爽,但是IT行业没有办法,技术在不断的更新,不学习安慰安慰一下自己,心里过不去,万一过1-2年被淘汰了,找份工作都不容易,因此还是多学习学习下,资料多整理一下,刚看完,阮一峰老师写的 45岁以后的人生

说实话,感慨肯定有,不要说45岁以后,就说30来岁,现在周末都不想去折腾技术,所以IT行业会为以后担忧的,好了先不说了;

项目的目录结构如下:

### 目录结构如下:
demo # 工程名
| |--- dist # 打包后生成的目录文件
| |--- node_modules # 所有的依赖包
| |--- src # 项目的文件包
| | |--- common
| | | |---css # 公用页面的css文件
| | | |---js # 公用页面的js文件
| |---
| |--- .babelrc # 支持es6
| |--- .gitignore
| |--- README.md
| |--- index.html # 首页入口文件
| |--- package.json
| |--- webpack.config.js # 配置文件
| |--- webpack.production.config.js # 上线打包配置文件

webpack 配置项如下代码:

// 导入路径包
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { //开启sourceMap便于调试
devtool: 'eval-source-map', //入口文件,
entry: './src/main.js', output: {
// 输出文件到当前目录下的 build文件夹内
path: path.resolve(__dirname, 'build'), publicPath: '/assets/', //指定资源文件引用的目录 filename: 'bundle.js' // 指定打包为一个文件 bundle.js
// filename: '[name].js' // 可以打包为多个文件 },
// 使用loader模块
module: {
/*
* 在webpack2.0版本已经将 module.loaders 改为 module.rules, 当然module.loaders也是支持的。
* 同时链式loader(用!连接)只适用于module.loader,同时-loader不可省略
*/
rules: [
{
test: /\.css$/,
use: [
'style-loader', {
loader: 'css-loader',
options: {
// modules: true // 设置css模块化,详情参考 https://github.com/css-modules/css-modules
}
},
{
loader: 'postcss-loader',
// 参考 https://github.com/postcss/postcss-loader
options: {
plugins: function() {
return [
require('autoprefixer')
];
}
}
}]
},
{
test: /\.styl(us)?$/,
use: [
'style-loader', 'css-loader', {
loader: "postcss-loader",
options: {
plugins: function() {
return [
require('autoprefixer')
];
}
}
}, 'stylus-loader']
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/ //需要排除的目录
}
]
},
// 配置devServer各种参数
devServer: {
// contentBase: "./", // 本地服务器所加载的页面所在的目录
hot: true, // 配置HMR之后可以选择开启
historyApiFallback: true, // 不跳转
inline: true // 实时刷新
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html' // 模版文件
}),
new webpack.HotModuleReplacementPlugin() // 热加载插件
]
}

package.json 打包配置如下:

"scripts": {
"start": "webpack-dev-server",
"build": "set NODE_ENV=production&&webpack --config ./webpack.production.config.js"
},

在项目中 进入项目的根目录后,运行 npm run start 即可运行项目;
在webpack2.0中使用 module.rules 来 代替之前的 module.loaders, 并且使用了 postcss-loader 插件,该插件的作用是:
用来对 .css文件进行处理,并添加在 style-loader 和 css-loader 之后,通过一个额外的 postcss方法来返回所需要使用的 PostCss插件,比如,代码返回
require('autoprefixer') 的作用是 加载 Autoprefixer插件。那么Autoprefixer插件的作用是为 css中的属性添加浏览器特定的前缀,因为一些css新属性,
各个浏览器下并不支持,因此使用该插件就可以做这些事情,比如在页面的代码如下:

h1 {
display: flex;
}

那么实际在页面上,通过Autoprefixer插件会自动渲染为:

h1 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

该插件就是解决浏览器前缀的问题,当然还有很多插件都可以往这个里面加。
在webpack的配置文件中可以对devServer 配置如下:

devServer: {
// contentBase: "./", // 本地服务器所加载的页面所在的目录
hot: true, // 配置HMR之后可以选择开启
historyApiFallback: true, // 不跳转
inline: true // 实时刷新
}

这时候我们就可以监听入口文件的改变,比如目前项目中的入口文件是 main.js,那么main.js及所有通过import进来的css和js文件进来的,只要有修改,都会
实时刷新,但是html文件修改不能实时刷新了,修改后需要我们手动刷新了。如上配置 devServer的 "inline"选项会为页面添加 "热加载"功能,"hot"功能
会开启 "热替换",即首先重新加载组件改变的部分(不是重新加载整个页面),如果两个参数都有的话,当资源改变时,webpack-dev-server将先尝试 热替换,
如果失败则会重新加载整个页面。 但是要实现热加载的话,还需要在代码中加入如下代码:

plugins: [
new webpack.HotModuleReplacementPlugin() // 热加载插件
]

配置中 devtool: 'eval-source-map', 配置会生成map文件,便于调试代码。

webpack2.0增加了对ES6模块的支持,不需要任何配置,webpack只针对 import导入和export 导出 的模块才会被编译为ES5,如果想所有的打包文件被编译成ES5的话,需要使用babel编译器转换,因此需要按照babel,然后在项目的根目录文件下 添加 .babelrc文件即可;

{
"presets": [
["es2015", {"modules": false}]
]
}

并且在webpack中需要添加loader,如下:

{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/ //需要排除的目录
}

git上代码连接

webpack2 项目构建一的更多相关文章

  1. 在Redhat上为.Net 项目构建基于Jenkins + Github + Mono 的持续集成环境

    在Redhat enterprise 6.5 的服务器上,为在gutub 上的 .net 项目构建一个持续集成环境,用到了Jenkins和mono.因公司的服务器在内网,访问外网时要通过代理,所以在很 ...

  2. 前端项目构建之yeoman

    各位好啊,我又和大家见面了,也许你已经不记得大明湖畔的容嬷嬷,但是只要记得博客园中的我就好,希望我的博客能像一股清风,为你驱散炎热的酷暑,好了,废话不多说,开始上干货,我今天带给大家的是前端工程化开发 ...

  3. 前后端分离之前端项目构建(grunt+require+angular)

    前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...

  4. 前端项目构建工具---Grunt

    什么是Grunt? grunt是javascript项目构建工具,在grunt流行之前,前端项目的构建打包大多数使用ant.(ant具体使用 可以google),但ant对于前端而言,存在不友好,执行 ...

  5. 准备阶段-maven项目构建

    依据我现阶段对maven的了解,具使用POM管理项目和强大的repository资源管理库支持. 在项目建立初期,对网站的可拓展.高并发.易于管理做了评估.最终使用Maven 管理该项目 . 如下是m ...

  6. React学习笔记---项目构建

    简介 ReactJs由于有FB的支持,得到了社区的极大关注,同时由于ReactJs只希望专一的做好View层次上的工作,所以本身并没有涉及很多周边工具. 今天要介绍一款工具,同时包含一个构建项目模板的 ...

  7. Gulp.js - 简单、直观的自动化项目构建工具

    Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...

  8. 第一次使用Android Studio时你应该知道的一切配置(三):gradle项目构建

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  9. 项目构建工具Gradle的使用入门(参考,只表明地址)

    Gradle入门介绍:简介 http://blog.jobbole.com/71999/ Gradle入门介绍:第一个Java项目 http://blog.jobbole.com/72558/ Gra ...

随机推荐

  1. 基于IDEA的bs三层架构

    1.在大学的老师讲课中,可能会用到myeclipse或者eclipse来进行编译运行.其中的缺点就是要自行去下载开发所需要的一些jar包,要考虑都版本的不同造成的影响,且ORACLE和MYSQL的链接 ...

  2. 【Spring】25、Spring代理。 BeanNameAutoProxyCreator 与 ProxyFactoryBean

    一般我们可以使用ProxyBeanFactory,并配置proxyInterfaces,target和interceptorNames实现,但如果需要代理的bean很多,无疑会对spring配置文件的 ...

  3. Codeforces672D(SummerTrainingDay01-I)

    D. Robin Hood time limit per test:1 second memory limit per test:256 megabytes input:standard input ...

  4. php中一个字符占用几个字节?

    先看看字符与字节有什么区别: (一)“字节”的定义 字节(Byte)是一种计量单位,表示数据量多少,它是计算机信息技术用于计量存储容量的一种计量单位. (二)“字符”的定义 字符是指计算机中使用的文字 ...

  5. TCP协议学习总结

    1.TCP协议通过三次握手建连接,四次挥手断连接. 2.TCP的定时器都有哪些? 做什么用途? 3.TCP的慢启动是什么意思? 4.TCP的快速重传是什么意思?

  6. MySQL主从及主主环境部署

    主从同步 主机环境 mysql的安装可以参考:https://www.cnblogs.com/brianzhu/p/8575243.htmlCentos7版本master:192.168.192.12 ...

  7. 《ASP.NET MVC企业实战》(二) MVC开发前奏

    ​ 在上一篇“<ASP.NET MVC企业级实战>(一)MVC开发前奏”中记录了作者介绍的一些比较实用的VS使用方法以及C#2.0中添加的新特性.本篇继续大概了解之后版本的一些新特性.   ...

  8. recovery 恢复出厂设置失败Data wipe failed

    最近客户反馈,编译32位的android系统,在recovery中执行恢复出厂设置的时候失败了,失败的打印提升信息如下. Formatting /data... [ 2.191404] E:get_f ...

  9. svn下已add文件如何忽略

    正如官方指南所言:TortoiseSVN → Unversion and add to ignore list,取消版本控制并添加至忽略列表. http://www.cnblogs.com/huang ...

  10. C# 异步编程4 async与await 异步程序开发

    随着C#异步程序开发系列的深入,你会发现编写异步程序越发简单.事物的发展就是这样的规律,从简单到复杂再到简单. 在C# 5.0中我们可以通过async与await关键字实现快捷的异步程序开发,如下: ...