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 相关文章推荐
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 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
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
运动会稿件50字
2014/02/17 职场文书
初中生评语大全
2014/04/24 职场文书
保护水资源的标语
2014/06/17 职场文书
部队2014年终工作总结
2014/11/27 职场文书
学习保证书100字
2015/02/26 职场文书
升学宴家长致辞
2015/07/27 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
python游戏开发之pygame实现接球小游戏
2022/04/22 Python