webpack2.0搭建前端项目的教程详解


Posted in Javascript onApril 05, 2017

一、什么是webpack:

webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

注意: 目前最新为webpack2.0版本,与1.0有一些出入

二、初始化项目

npm init

npm install webpack --save-dev

三、安装loader,stylus以及postCss

npm install style-loader css-loader stylus-loader stylus --save-dev
npm install --save-dev postcss-loader autoprefixer

四、目录结构大致如下

webpack2.0搭建前端项目的教程详解

五、添加webpack.config.js 配置如下:

// 该配置基于webpack2.0 详情查看 https://webpack.js.org/guides/migrating/
const path = require('path'); // 导入路径包

module.exports = {
 entry: './src/main.js', //入口文件
 output: {
 path: path.resolve(__dirname, 'build'), // 指定打包之后的文件夹

 // publicPath: '/assets/', // 指定资源文件引用的目录,也就是说用/assests/这个路径指代path,开启这个配置的话,index.html中应该要引用的路径全部改为'/assets/...'
 // filename: 'bundle.js' // 指定打包为一个文件 bundle.js
 filename: '[name].js' // 可以打包为多个文件
 },
 // 使用loader模块
 module: {
 /* 在webpack2.0版本已经将 module.loaders 改为 module.rules 为了兼容性考虑以前的声明方法任然可用,



同时链式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',
   // 在这里进行配置,也可以在postcss.config.js中进行配置,详情参考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'
  ]
 }]
 }
}

在index.html中引入'/build/main.js'。main.js 代码如下

require('./common/css/style.css'); require('./common/css/stylus.styl');

六、通过webpack-dev-server实现页面的自动刷新。

首先安装webpack-dev-server

npm install --save-dev webpack-dev-server

然后修改package.json配置文件中:

"scripts": {
 "start": "webpack-dev-server",
 "build": "webpack"
 }

使用npm start 启动服务。npm的 start是一个特殊的脚本名称,它的特殊性表现在,在命令行中使用npm start就可以执行相关命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name} ,所以打包命令修改为npm run build

这里如果使用webpack-dev-server 命令来启动就必须全局安装 devServer:

npm install webpack-dev-server -g

在webpack的配置文件中可以对devServer进行配置

// 配置devServer各种参数
 devServer: {
 contentBase: "./", // 本地服务器所加载的页面所在的目录
 historyApiFallback: true, // 不跳转
 inline: true // 实时刷新
 }

此时可以监听入口文件的改变,实时刷新页面,然而非入口文件的改变则不会被监听到,需要手动进行刷新。并且目标文件不包括index.html。这里使用html-webpack-plugin插件。

npm install html-webpack-plugin --save-dev

修改webpack配置文件,添加以下配置:

...
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 ....,
 plugins: [
 new HtmlWebpackPlugin({
  template: './index.html' // 模版文件
 })
 ]
}

这里记录一下遇到的坑:首先,devServer其实读取的是打包之后的文件,但是这些文件是存储在内存当中(并不会显示在build下)。然后由于使用HtmlWebpackPlugin这个插件,它可以自动帮你将打包的js插入模版html文件中,因此我们要将原文件(就是作为模版的index.html文件)中插入的main.js这行代码去掉。然后如果开启了publicPath这个选项,HtmlWebpackPlugin会插入publicPth选项的路径('/assets/main.js'),devServer的index.html此时是无法读取到该目录下的文件。但是奇怪的是devServer此时直接没有插入该scripts。。不知道为啥。。但是为了部署的问题,cdn啥的,对开发环境和生产环境应该开启不同的publicPath,也就是说开发和生产应该使用两个不同的配置文件(包括sourcemap,devserver都不应该出现在生产的配置中)。

七、sourcemap 让开发更易于调试

module.exports = {
 devtool: 'eval-source-map',//配置生成Source Maps,选择合适的选项
 ....
 }
}

webpack2.0搭建前端项目的教程详解

八、使用ES6语法

webpack2.0增加了对ES6模块的支持,无需额外的配置,并且可以与 AMD 和 CommonJS混用。webpack 2可以分析理解所有的ES6代码并且只在检测到是ES6模块时才使用tree-shaking。然而,只有import导入和export导出的模块才会被编译为ES5,如果希望所有的打包文件都编译为ES5,你需要使用一个转译器来处理剩下来的文件。这里我使用babel。首先安装babel:

npm install --save-dev babel-core babel-loader babel-preset-es2015

在根目录下添加.babelrc文件,并添加配置

如果bable的配置仍然为:

{
 presets: ['es2015']
}

那么无用的代码也会被打包(Babel会将ES 6模块通过commonJs模块转换输出,然后webpack 2就不能进行tree-shaking分析了)。这块儿大致原理是这样的。。。

因此我们将配置文件改为:

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

并且在webpack的配置文件中加入如下loader(此处一定不能用use,不知道为啥)

{
 test: /\.js$/,
 loader: 'babel-loader', //此处不能用use,不知道为啥
 exclude: /node_modules/ //需要排除的目录
}

九、热加载模块(HMR)

webpack配置文件中,devServer的“inline”选项会为入口页面添加“热加载”功能,“hot”选项则开启“热替换(Hot Module Reloading)”,即尝试重新加载组件改变的部分(而不是重新加载整个页面)。如果两个参数都传入,当资源改变时,webpack-dev-server将会先尝试HRM(即热替换),如果失败则重新加载整个入口页面。要使用HRM,首先需要在webpack配置文件中配置plugin:

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

到这一步,实际上改变css可以实现hrm,然而js只会刷新整个页面,index.html直接不刷新了。。。不知道为啥。react可以通过react-transform-hrm来搞定。非react框架现在考虑用webpack-dev-middleware 来尝试一下

十、生产环境

 通过以上步骤基本的开发环境就搭建完毕了,那么实际上在生产环境里可能会有其他的要求,例如分离js与css(目前css是打包到js中去的),例如压缩代码等。

首先创建一个webpack.production.config.js,然后在package.json中配置修改为:

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

当运行 npm run build 的时候,会设置环境变量"NODE_ENV"为"production"。

var prod = process.env.NODE_ENV === 'production' ? true : false;

现在分别介绍几个常用的插件:

      1.提取公共模块插件(webpack内置) CommonsChunkPlugin

      2.压缩js插件(webpack内置) UglifyJsPlugin

      3.分离css文件: ExtractTextPlugin 注意该插件由于和webpack2不兼容,需要指定版本。。在webpack.production.config.js 中的配置,注意与1.x版本loader的写法不同。

      4.清除文件夹: clean-webpack-plugin

运用[hash]使得产生的文件名带有哈希值,合理使用缓存。

项目地址: https://github.com/Dyzzi/webpack-demo-project

本地下载:点击这里

总结

以上就是这篇文章的全部内容了,至此大致的开发以及生产环境已经搭建完毕。希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持

Javascript 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
Vue如何将页面导出成PDF文件
Aug 17 Javascript
微信小程序实现签到弹窗动画
Sep 21 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 #Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 #Javascript
关于vuex的学习实践笔记
Apr 05 #Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 #Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 #Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 #Javascript
Vue.js render方法使用详解
Apr 05 #Javascript
You might like
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
库房主管岗位职责
2013/12/31 职场文书
电子商务专业求职信
2014/03/08 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
资料员岗位职责
2015/02/10 职场文书
Golang: 内建容器的用法
2021/05/05 Golang