一webpack介绍
1由来
2介绍
3作用
4拓展说明
5webpack整体认知
二webpack安装
1安装node
2安装cnpm
3安装nrm的两种方法
4安装webpack
三webpack配置
0搭建项目结构
1初始化一个项目会创建一个packagejson文件
2在当前的项目中安装Webpack作为依赖包
3当前项目结构
4实现CSS打包
5实现SCSS打包
6实现Less打包
7实现打包url资源图片gif图标等功能
8Webpack-dev-server结合后端服务器的热替换配置
9ES6转换为ES5语法
10防止文件缓存生成带有20位的hash值的唯一文件
11抽取CSS为单独文件
12开发环境和生产环境的分离
13在生产环境中配置代码压缩功能

一、webpack介绍
1、由来
由于前端之前js、css、图片文件需要单独进行压缩和打包,这样团队人员处理很繁琐,然后 Instagram 团队就想让这些工作自动化,然后webpack应运而生。

2、介绍
webpack是一个模块打包器(module bundler),webpack视HTML,JS,CSS,图片等文件都是一种 资源 ,每个资源文件都是一个模块(module)文件,webpack就是根据每个模块文件之间的依赖关系将所有的模块打包(bundle)起来。

3、作用
对 CommonJS 、 AMD 、ES6的语法做了兼容
对js、css、图片等资源文件都支持打包(适合团队化开发)
比方你写一个js文件,另外一个人也写一个js文件,需要合并很麻烦,现在交给webpack合并很简单
有独立的配置文件webpack.config.js
可以将代码切割成不同的chunk,实现按需加载,降低了初始化时间
具有强大的Plugin(插件)接口,大多是内部插件,使用起来比较灵活

……

4、拓展说明
CommonJS、AMD、CMD是用于JavaScript模块管理的三大规范,CommonJS定义的是模块的同步加载,是一个更偏向于服务器端的规范(也可以在浏览器中使用),主要用于Nodejs,根据CommonJS规范,一个单独的文件就是一个模块,加载模块使用require()方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。

AMD和CMD则是定义模块异步加载适用于浏览器端,都是为了 JavaScript 的模块化开发,(这里说一下为什要有异步加载,因为浏览器如果使用common.js同步加载模块的话,就会导致性能等问题,所以针对这个问题,又出了一个规范,这个规范可以实现异步加载依赖模块)

AMD规范会提前加载依赖模块,AMD规范是通过requireJs 在推广过程中对模块定义的规范化产出。(AMD 规范:https://github.com/amdjs/amdjs-api/wiki/AMD)

CMD规范会延迟加载依赖模块, CMD 规范是 SeaJs 在推广过程中对模块定义的规范化产出。

(CMD规范:https://github.com/seajs/seajs/issues/242)

AMD规范和CMD规范的区别

对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)
CMD 推崇依赖就近,AMD 推崇依赖前置
AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。CMD 里,每个 API 都简单纯粹
webpack和gulp的区别

gulp是前端自动化构建工具,强调的是前端开发的工作流程,我们可以通过配置一系列的task,定义task处理的事情(代码压缩、合并、编译、浏览器实时更新等),然后定义执行顺序,来让gulp执行这些task,从而构建项目的整个前端开发流程,自动化构建工具并不能把所有模块打包到一起,也不能构建不同模块之间的依赖关系。
webpack是 JavaScript 应用程序的模块打包器,强调的是一个前端模块化方案,更侧重模块打包,我们可以把开发中的所有资源(图片、js文件、css文件等)都看成模块,通过loader(加载器)和plugins(插件)对资源进行处理,打包成符合生产环境部署的前端资源。

5、webpack整体认知

​ (1)、webpack的核心概念分为 入口(Entry)、加载器(Loader)、插件(Plugins)、出口(Output);

入口(Entry):入口起点告诉 webpack 从哪里开始,并根据依赖关系图确定需要打包的文件内容

加载器(Loader):webpack 将所有的资源(css, js, image 等)都看做模块,但是 webpack 能处理的只是 JavaScript,因此,需要存在一个能将其他资源转换为模块,让 webpack 能将其加入依赖树中的东西,它就是 loader。loader用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。

  1. rules: [
  2. {
  3. test: /\.(js|jsx)$/,
  4. use: 'babel-loader'
  5. }
  6. ]

插件(Plugins):loader 只能针对某种特定类型的文件进行处理,而 plugin 的功能则更为强大。在 plugin 中能够介入到整个 webpack 编译的生命周期,Plugins用于解决 loader 无法实现的其他事情,也就是说loader是预处理文件,那plugin 就是后处理文件。

对loader打包后的模块文件(bundle.js)进行二次优化处理,例如:代码压缩从而减小文件体积

提供辅助开发的作用:例如:热更新(浏览器实时显示)

  1. plugins: [
  2. new webpack.optimize.UglifyJsPlugin(),
  3. new HtmlWebpackPlugin({template: './src/index.html'})
  4. ]

二、webpack安装

1、安装node

使用 node -v 命令检查版本

2、安装cnpm

https://cnpmjs.org/

  1. npm install -g cnpm --registry=https://registry.npm.taobao.org

使用 cnpm -v 命令检查版本

3、安装nrm的两种方法
https://www.npmjs.com/package/nrm

nrm可以帮助我们切换不同的NPM源的快捷开关,可以切换的NPM源包括:npm,cnpm,taobao, rednpm, npmMirror , edunpm

第一种方法(由于是外网访问进行安装,可能会被墙)
npm install -g nrm

第二种方法(国内的淘宝镜像,访问稳定,推荐)
cnpm install -g nrm

使用 nrm - V 命令检查版本(注意这里的 V 是大写的)

使用nrm ls 命令可以查看当前可以可以切换的 NPM源
使用 npm use cnpm 命令 指定要使用的哪种NPM源

4、安装webpack
全局安装

  1. npm install --global webpack

在项目中安装最新版本或特定版本,分别执行以下命令:

  1. npm install --save-dev webpack
  2. npm install --save-dev webpack@<version>

三、webpack配置

0、搭建项目结构

--src:代码开发目录,

--build:开发环境webpack编译打包输出目录,同样按照view、styles、js组织

--dist:生产环境webpack编译打包输出目录,同样按照view、styles、js组织

--node_modules:所以使用的nodeJs模块

--package.json: 项目配置

--webpack.config.js: 开发环境webpack配置

--webpack.production.config.js: 生产环境webpack配置

1、初始化一个项目(会创建一个package.json文件)

  1. npm init

2、在当前的项目中安装Webpack作为依赖包

  1. npm install --save-dev webpack

说明:--save :将配置信息保存到package.json中,

同时 --save :也是项目生产环境,项目发布之后还依赖的东西,保存在dependencies

例如:如果你用了 jQuery,由于发布之后还是依赖jQuery,所以是dependencies

--save-dev :是项目开发环境依赖的东西,保存在devDependencies中

例如:写 ES6 代码,如果你想编译成 ES5 发布那么 babel 就是devDependencies

4、实现CSS打包

  1. npm install css-loader style-loader --save-dev
  2. 或者
  3. cnpm install css-loader style-loader --save-dev

在src—>css目录中新建main.css

  1. css
  2. #first{
  3. border: 1px solid red;
  4. }

在webpack.config.js中配置相关的loader

  1. const path = require('path'); // 首先要引入node.js中path 模块,用于处理文件与目录的路径
  2.  
  3. // const 命令声明一个只读的常量,一旦声明,值不可以改变,改变会报错;只声明不赋值也会报错
  4. // 常量存储的是一个不可以变化的变量。
  5. //
  6. module.exports = {
  7. entry:'./src/./js/main.js', // 指定入口文件
  8. output:{
  9. path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路径目录
  10. filename: 'bulid.js' // 制定出口文件的名称
  11. },
  12. module:{
  13. rules:[
  14. // 在webpack2中,loaders 被替换成了 rules 其实就是loader的规则
  15. {
  16. test: /\.css$/,
  17. use: [ 'style-loader', 'css-loader' ]
  18. // test 说明了当前 loader 能处理那些类型的文件
  19. // use 则指定了 loader 的类型。
  20. // 注意:数组中的loader不能省略扩展名
  21. }
  22. ]
  23. }
  24. }

在main.js中获取css目录中的main.css文件

  1. // 1、获取index.html中的dom对象
  2. var first = document.getElementById('first');
  3. var btn = document.getElementById('btn');
  4. var two = document.getElementById('two');
  5. var res = document.getElementById('res');
  6. btn.onclick = function(){
  7. var firstValue = parseFloat(first.value);
  8. var twoValue = parseFloat(two.value);
  9. //2、获取 module1.js中的 sum函数
  10. //http://www.ruanyifeng.com/blog/2015/05/require.html
  11. var sum = require('./module1.js');
  12. res.value = sum(firstValue,twoValue);
  13. }
  14.  
  15. // 3、获取css目录中的main.css文件
  16. require('../css/main.css');

在终端中输入 webpack命令进行css文件打包

5、实现SCSS打包

在src目录中新建 sass目录–> scss1.scss

  1. scss
  2. // scss1.scss文件
  3. $color:purple;
  4. #two{
  5. border:1px solid $color;
  6. }

安装对应的loader

  1. npm install sass-loader node-sass webpack --save-dev
  2. 或者
  3. cnpm install sass-loader css-loader style-loader node-sass webpack --save-dev

在webpack.config.js中配置相关的loader

  1. const path = require('path'); // 首先要引入node.js中path 模块,用于处理文件与目录的路径
  2.  
  3. // const 命令声明一个只读的常量,一旦声明,值不可以改变,改变会报错;只声明不赋值也会报错
  4. // 常量存储的是一个不可以变化的变量。
  5. //
  6. module.exports = {
  7. entry:'./src/./js/main.js', // 指定入口文件
  8. output:{
  9. path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路径目录
  10. filename: 'bulid.js' // 制定出口文件的名称
  11. },
  12. module:{
  13. rules:[
  14. // 在webpack2中,loaders 被替换成了 rules 其实就是loader的规则
  15. // 实现 css 打包
  16. {
  17. test: /\.css$/,
  18. use: [ 'style-loader', 'css-loader' ]
  19. // test 说明了当前 loader 能处理那些类型的文件
  20. // use 则指定了 loader 的类型。
  21. // 注意:数组中的loader不能省略扩展名
  22. },
  23. {
  24. test: /\.scss$/,
  25. // 注意 是sass-loader ,不是 scss-loader
  26. use: [ 'style-loader', 'css-loader', 'sass-loader' ]
  27. }
  28.  
  29. ]
  30. }
  31. }

在js目录中 main.js里面引入 scss1.scss

  1. // 1、获取index.html中的dom对象
  2.  
  3. var first = document.getElementById('first');
  4. var btn = document.getElementById('btn');
  5. var two = document.getElementById('two');
  6. var res = document.getElementById('res');
  7.  
  8. btn.onclick = function(){
  9. var firstValue = parseFloat(first.value);
  10. var twoValue = parseFloat(two.value);
  11. //2、获取 module1.js中的 sum函数
  12. //http://www.ruanyifeng.com/blog/2015/05/require.html
  13. var sum = require('./module1.js');
  14. res.value = sum(firstValue,twoValue);
  15. }
  16.  
  17. // 3、获取css目录中的main.css文件
  18. require('../css/main.css');
  19.  
  20. // 4、获取sass目录中的scss1.scss文件
  21. require('../sass/scss1.scss');

在终端中输入 webpack命令进行scss文件打包

6、实现Less打包

安装

  1. cnpm install --save-dev
  2. cnpm install less less-loder css-loader style-loader webpack --save-dev
  3. 或者
  4. cnpm install less-loader less --save-devwebpack.config.js中配置相关的loader

在在src目录中新建less目录–> less1.less

  1. @color:blue;
  2. #res{
  3.  
  4. border:1px dashed blue;
  5. }

在webpack.config.js中配置相关的loader

  1. const path = require('path'); // 首先要引入node.js中path 模块,用于处理文件与目录的路径
  2.  
  3. // const 命令声明一个只读的常量,一旦声明,值不可以改变,改变会报错;只声明不赋值也会报错
  4. // 常量存储的是一个不可以变化的变量。
  5. //
  6. module.exports = {
  7. entry:'./src/./js/main.js', // 指定入口文件
  8. output:{
  9. path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路径目录
  10. filename: 'bulid.js' // 制定出口文件的名称
  11. },
  12. module:{
  13. rules:[
  14. // 在webpack2中,loaders 被替换成了 rules 其实就是loader的规则
  15. // 实现 css 打包
  16. {
  17. test: /\.css$/,
  18. use: [ 'style-loader', 'css-loader' ]
  19. // test 说明了当前 loader 能处理那些类型的文件
  20. // use 则指定了 loader 的类型。
  21. // 注意:数组中的loader不能省略扩展名
  22. },
  23. // 实现 scss 打包
  24. {
  25. test: /\.scss$/,
  26. // 注意 是sass-loader ,不是 scss-loader
  27. use: [ 'style-loader', 'css-loader', 'sass-loader' ]
  28. },
  29. // 实现 less 打包
  30. {
  31. test: /\.less$/,
  32. use: [ 'style-loader', 'css-loader', 'less-loader' ]
  33. }
  34.  
  35. ]
  36. }
  37. }

在js目录中 main.js里面引入 less1.less文件

  1. js
  2. // 5、获取less目录中的less1.less文件
  3. require('../less/less1.less');
7、实现打包url资源(图片、gif、图标等)功能
  • 在src 目录中 新建imgs目录,放入两张不同大小的图片

  • 在index.html中新增 <div id="bg1"></div> <div id="bg2"></div>

  • 在mian.css中新增

  1. // mian.css文件
  2. #bg1{
  3. width: 200px;
  4. height: 200px;
  5. background: url('../imgs/bxg.jpg');
  6. }
  7.  
  8. #bg2{
  9. width: 200px;
  10. height: 200px;
  11. background: url('../imgs/web.jpg') no-repeat;
  12. }

前言

如果我们希望在页面引入图片(包括img的src和background的url)。当我们基于webpack进行开发时,引入图片会遇到一些问题。

​ 其中一个就是引用路径的问题。拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。

​ 另外,如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。

​ url-loader和file-loader是什么关系呢?简答地说,url-loader封装了file-loader。url-loader不依赖于file-loader,即使用url-loader时,只需要安装url-loader即可,不需要安装file-loader,因为url-loader内置了file-loader。通过上面的介绍,我们可以看到,url-loader工作分两种情况:1.文件大小小于limit参数,url-loader将会把文件转为DataURL;2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。因此我们只需要安装url-loader即可。

安装

  1. cnpm install
  2. cnpm install url-loader file-loader --save-dev

在webpack.config.js中配置相关的loader

  1. const path = require('path'); // 首先要引入node.js中path 模块,用于处理文件与目录的路径
  2.  
  3. // const 命令声明一个只读的常量,一旦声明,值不可以改变,改变会报错;只声明不赋值也会报错
  4. // 常量存储的是一个不可以变化的变量。
  5. //
  6. module.exports = {
  7. entry:'./src/./js/main.js', // 指定入口文件
  8. output:{
  9. path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路径目录
  10. filename: 'bulid.js' // 制定出口文件的名称
  11. publicPath:'dist/'
  12. // path:所有输出文件的目标路径;
  13. // publicPath:输出解析文件的目录,url 相对于 HTML 页面
  14. },
  15. module:{
  16. rules:[
  17. // 在webpack2中,loaders 被替换成了 rules 其实就是loader的规则
  18. // 实现 css 打包
  19. {
  20. test: /\.css$/,
  21. use: [ 'style-loader', 'css-loader' ]
  22. // test 说明了当前 loader 能处理那些类型的文件
  23. // use 则指定了 loader 的类型。
  24. // 注意:数组中的loader不能省略扩展名
  25. },
  26. // 实现 scss 打包
  27. {
  28. test: /\.scss$/,
  29. // 注意 是sass-loader ,不是 scss-loader
  30. use: [ 'style-loader', 'css-loader', 'sass-loader' ]
  31. },
  32. // 实现 less 打包
  33. {
  34. test: /\.less$/,
  35. use: [ 'style-loader', 'css-loader', 'less-loader' ]
  36. },
  37. // 实现 url 资源打包
  38. {
  39. // 图片和字体文件使用 url-loader 来处理
  40. test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg)$/,
  41. use: [
  42. {
  43. loader: 'url-loader',
  44. // options 为可以配置的选项
  45. options: {
  46. limit: 8192
  47. // limit=8192表示将所有小于8kb的图片都转为base64形式(为什么呢?因为一个很小的图片,不值当的去发送一个请求,减少请求次 数。)
  48. // (其实应该说超过8kb的才使用 url-loader 来映射到文件,否则转为dataurl形式)
  49. }
  50. }
  51. ]
  52. //保证输出的图片名称与之前命名的图片名称保持一致(目前只是支持这样的写法,webpack3 没有响应的options进行配置)
  53. // use:'url-loader?limit=8192&name=imgs/[name].[ext]'
  54. }
  55.  
  56. ]
  57. }

在main.js中引入mui目录中icons-extra.css的文件

  1. // 5、获取less目录中的less1.less文件
  2. require('../less/less1.less');
  3.  
  4. // 6、获取src目录中的mui目录中icons-extra.css的文件
  5. require('../mui/css/icons-extra.css');

Webpack-dev-server结合后端服务器的热替换配置

webpack-dev-server提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading),同时把生成好的js和html构建到我们的电脑内存中,这样的话,即使我们的目录中没有了相关js等文件,还能够加载出来,这样能够提高我们页面运行速度。

安装 webpack-dev-server 插件

  1. // 先把之前依赖的包安装
  2. cnpm install
  1. cnpm install webpack-dev-server --save-dev
  1. // webpack.config.js
  2. const path = require('path'); // 首先要引入node.js中path 模块,用于处理文件与目录的路径
  3. // const 命令声明一个只读的常量,一旦声明,值不可以改变,改变会报错;只声明不赋值也会报错
  4. // 常量存储的是一个不可以变化的变量。
  5. module.exports = {
  6. entry:'./src/./js/main.js', // 指定入口文件
  7. output:{
  8. path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路径目录
  9. filename: 'bulid.js' // 制定出口文件的名称
  10. },
  11. module:{
  12. rules:[
  13. // 在webpack2中,loaders 被替换成了 rules 其实就是loader的规则
  14. // 实现 css 打包
  15. {
  16. test: /\.css$/,
  17. use: [ 'style-loader', 'css-loader' ]
  18. // test 说明了当前 loader 能处理那些类型的文件
  19. // use 则指定了 loader 的类型。
  20. // 注意:数组中的loader不能省略扩展名
  21. },
  22. // 实现 scss 打包
  23. {
  24. test: /\.scss$/,
  25. // 注意 是sass-loader ,不是 scss-loader
  26. use: [ 'style-loader', 'css-loader', 'sass-loader' ]
  27. },
  28. // 实现 less 打包
  29. {
  30. test: /\.less$/,
  31. use: [ 'style-loader', 'css-loader', 'less-loader' ]
  32. },
  33. // 实现 url 资源打包
  34. {
  35. // 图片文件使用 url-loader 来处理
  36. test: /\.(png|jpg|gif|ttf)$/,
  37. use: [
  38. {
  39. loader: 'url-loader',
  40. // options 为可以配置的选项
  41. options: {
  42. limit: 8192
  43. // limit=8192表示将所有小于8kb的图片都转为base64形式
  44. // (其实应该说超过8kb的才使用 url-loader 来映射到文件,否则转为data url形式)
  45. }
  46. }
  47. ]
  48. }
  49.  
  50. ]
  51. },
  52. devServer: {
  53. // contentBase: './dist', // 在 localhost:8080(默认) 下建立服务,将 dist 目录下的文件,作为可访问文件 contentBase:告诉服务器从哪里提供内容
  54. // 或者通过以下方式配置
  55. contentBase: path.join(__dirname, "dist"),
  56. compress: true,
  57. // 当它被设置为true的时候对所有的服务器资源采用gzip压缩
  58. // 对JS,CSS资源的压缩率很高,可以极大得提高文件传输的速率,从而提升web性能
  59. port: 9000, // 如果想要改端口,可以通过 port更改
  60. hot: true, // 启用 webpack 的模块热替换特性()
  61. inline: true, // 实现实时重载(实现自动刷新功能)默认情况下是 true。
  62. host: "localhost" // 如果你希望服务器外部可访问,指定使用一个 host。默认是 localhost(也就是你可以不写这个host这个配置属性)。
  63. }
  64. }
  1. // package.json
  2. {
  3. "name": "mywebpack",
  4. "version": "1.0.0",
  5. "description": "",
  6. "main": "webpack.config.js",
  7. "scripts": {
  8. "test": "echo \"Error: no test specified\" && exit 1",
  9. "start": "webpack-dev-server --open"
  10. // "start": "webpack-dev-server --open --port 8080 --hot --inline" // 如果在这里配置了,就不用在webpack.config.js中配置devServer属性了。
  11. },
  12. "author": "",
  13. "license": "ISC",
  14. "devDependencies": {
  15. "css-loader": "^0.28.7",
  16. "file-loader": "^1.1.5",
  17. "html-webpack-plugin": "^2.30.1",
  18. "less": "^3.0.0-alpha.3",
  19. "less-loader": "^4.0.5",
  20. "node-sass": "^4.5.3",
  21. "sass-loader": "^6.0.6",
  22. "style-loader": "^0.19.0",
  23. "url-loader": "^0.6.2",
  24. "webpack": "^3.8.1",
  25. "webpack-dev-server": "^2.9.3"
  26. }
  27. }

在命令行中运行 npm start,就会看到浏览器自动加载页面。如果现在修改和保存任意源文件,web 服务器就会自动重新加载编译后的代码,但是打开后发现,打开的是 dist目录,我们想要的是 index.html显示我们的页面,所以这是我们还要借助里另一个 html-webpack-plugin 插件。

html-webpack-plugin 简单创建 HTML 文件,用于服务器访问,其中包括使用script标签的body中的所有webpack包。

安装 html-webpack-plugin 插件]

  1. cnpm install --save-dev html-webpack-plugin

webpack.config.js配置

  1. const path = require('path'); // 首先要引入node.js中path 模块,用于处理文件与目录的路径
  2. // const 命令声明一个只读的常量,一旦声明,值不可以改变,改变会报错;只声明不赋值也会报错
  3. // 常量存储的是一个不可以变化的变量。
  4.  
  5. // 引入html-webpack-plugin 插件
  6. const HtmlWebpackPlugin = require('html-webpack-plugin');
  7.  
  8. const webpack = require('webpack');
  9. module.exports = {
  10. entry: './src/./js/main.js', // 指定入口文件
  11. output: {
  12. path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路径目录
  13. filename: 'bulid.js' // 制定出口文件的名称
  14. },
  15. module: {
  16. rules: [
  17. // 在webpack2中,loaders 被替换成了 rules 其实就是loader的规则
  18. // 实现 css 打包
  19. {
  20. test: /\.css$/,
  21. use: ['style-loader', 'css-loader']
  22. // test 说明了当前 loader 能处理那些类型的文件
  23. // use 则指定了 loader 的类型。
  24. // 注意:数组中的loader不能省略扩展名
  25. },
  26. // 实现 scss 打包
  27. {
  28. test: /\.scss$/,
  29. // 注意 是sass-loader ,不是 scss-loader
  30. use: ['style-loader', 'css-loader', 'sass-loader']
  31. },
  32. // 实现 less 打包
  33. {
  34. test: /\.less$/,
  35. use: ['style-loader', 'css-loader', 'less-loader']
  36. },
  37. // 实现 url 资源打包
  38. {
  39. // 图片文件使用 url-loader 来处理
  40. test: /\.(png|jpg|gif|ttf)$/,
  41. use: [{
  42. loader: 'url-loader',
  43. // options 为可以配置的选项
  44. options: {
  45. limit: 8192
  46. // limit=8192表示将所有小于8kb的图片都转为base64形式
  47. // (其实应该说超过8kb的才使用 url-loader 来映射到文件,否则转为data url形式)
  48. }
  49. }]
  50. }
  51.  
  52. ]
  53. },
  54. devServer: {
  55. // contentBase: './dist', // 在 localhost:8080(默认) 下建立服务,将 dist 目录下的文件,作为可访问文件 contentBase:告诉服务器从哪里提供内容
  56. // 或者通过以下方式配置
  57. contentBase: path.join(__dirname, "dist"),
  58. port: 9000, // 如果想要改端口,可以通过 port更改
  59. hot: true, // 启用 webpack 的模块热替换特性()
  60. inline: true, // 实现实时重载(实现自动刷新功能)默认情况下是 true。
  61. host: "localhost" // 如果你希望服务器外部可访问,指定使用一个 host。默认是 localhost(也就是你可以不写这个host这个配置属性)。
  62. },
  63. plugins: [
  64. new HtmlWebpackPlugin({
  65. title: '首页', // 用于生成的HTML文档的标题
  66. filename: 'index.html', //写入HTML的文件。默认为index.html。也可以指定一个子目录(例如:)assets/admin.html
  67. template: 'index.html' // Webpack需要模板的路径
  68. }),
  69. new webpack.HotModuleReplacementPlugin() // 需要结合 启用热替换模块(Hot Module Replacement),也被称为 HMR
  70. ]
  71. }
  • 再次使用npm start命令就可以实现浏览器自动更新。

  • 问题来了,HtmlWebpackPlugin中的 title并没有显示出来,原因是需要在定义的template模板中使用ejs语法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <!-- EJS 语法
  7. /* EJS是一个简单高效的模板语言,通过数据和模板,可以生成HTML标记文本。可以说EJS是一个JavaScript库,EJS可以同时运行在客户端和服务器端,客户端安装直接引入文件即可 */
  8. -->
  9. <title><%= htmlWebpackPlugin.options.title%></title>
  10. </head>
  11.  
  12. <body>
  13. <input type="text" id="first">
  14. <input type="button" id="btn" value="+">
  15. <input type="text" id="two">
  16. <input type="button" id="btn" value="=">
  17. <input type="text" id="res">
  18. <div id="bg1"></div>
  19. <div id="bg2"></div>
  20. </body>
  21. </html>

再次使用npm start命令就可以啦。

9、ES6转换为ES5语法

安装

  1. cnpm install --save-dev babel-loader babel-core babel-preset-env

babel-core如果某些代码需要调用Babel的API进行转码,就要使用babel-core模块
babel-preset-env通过根据您的目标浏览器或运行时环境自动确定您需要的Babel插件
babel 对一些公共方法使用了非常小的辅助代码,比如 _extend。 默认情况下会被添加到每一个需要它的文件中,你可以引入 babel runtime 作为一个独立模块,来避免重复引入。

你必须执行 npm install babel-plugin-transform-runtime --save-dev 来把它包含到你的项目中,也要使用 npm install babel-runtime --save 把 babel-runtime 安装为一个依赖

配置

  1. // 实现 url 资源打包
  2. {
  3. // 图片文件使用 url-loader 来处理
  4. test: /\.(png|jpg|gif|ttf)$/,
  5. use: [{
  6. loader: 'url-loader',
  7. // options 为可以配置的选项
  8. options: {
  9. limit: 8192
  10. // limit=8192表示将所有小于8kb的图片都转为base64形式
  11. // (其实应该说超过8kb的才使用 url-loader 来映射到文件,否则转为data url形式)
  12. }
  13. }]
  14. },
  15. // 实现 ES6转 ES5
  16. {
  17. test: /\.js$/,
  18. exclude: /(node_modules)/, // exclude 排除的意思,把 node_modules文件夹排除编译之外
  19. use: {
  20. loader: 'babel-loader',
  21. options: {
  22. // presets 预设列表(一组插件)加载和使用
  23. presets: ['env'],
  24. plugins: ['transform-runtime'] // 加载和使用的插件列表
  25. }
  26. }
  27. }

把一些代码改成ES6 语法的写法

  1. // moudule1.js
  2.  
  3. function sum(x,y){
  4. return x + y;
  5. }
  6. // 导出 sum 函数
  7. // module.exports = sum;
  8. // 改成ES6 的写法语法
  9. export default{
  10. sum
  11. }
  1. // main.js
  2.  
  3. // 1、获取index.html中的dom对象
  4. var first = document.getElementById('first');
  5. var btn1 = document.getElementById('btn1');
  6. var two = document.getElementById('two');
  7. var res = document.getElementById('res');
  8. console.log(1);
  9. btn1.onclick = function() {
  10. var firstValue = parseFloat(first.value);
  11. var twoValue = parseFloat(two.value);
  12. //2、获取 module1.js中的 sum函数
  13. //http://www.ruanyifeng.com/blog/2015/05/require.html
  14. console.log(2);
  15.  
  16. /* var sum = require('./module1.js');
  17. res.value = sum(firstValue,twoValue);*/
  18. res.value = sumObj.sum(firstValue, twoValue);
  19. }
  20.  
  21. // 3、获取css目录中的main.css文件
  22. // require('../css/main.css');
  23.  
  24. // 把步骤3 改为 ES6写法,引入css目录中的main.css文件
  25. import '../css/main.css';
  26.  
  27. // 4、获取sass目录中的scss1.scss文件
  28. require('../sass/scss1.scss');
  29.  
  30. // 5、获取less目录中的less1.less文件
  31. require('../less/less1.less');
  32.  
  33. // 6、获取src目录中的mui目录中icons-extra.css的文件
  34. require('../mui/css/icons-extra.css');
  35.  
  36. // 把 var sum = require('./module1.js'); 写成 ES6语法
  37. import sumObj from './module1.js'

10、防止文件缓存(生成带有20位的hash值的唯一文件)

  1. // webpack.config.js
  2.  
  3. output: {
  4. path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路径目录
  5. // filename: 'bulid.js' // 制定出口文件的名称
  6. filename: '[name].[hash].js' // 将入口文件重命名为带有20位的hash值的唯一文件
  7. }
11、抽取CSS为单独文件
    • 安装插件从 build.js文件中提取文本(CSS)到单独的文件


      • npm install --save-dev extract-text-webpack-plugin 
    • 在webpack.config.js中配置

  1. const path = require('path'); // 首先要引入node.js中path 模块,用于处理文件与目录的路径
  2. // const 命令声明一个只读的常量,一旦声明,值不可以改变,改变会报错;只声明不赋值也会报错
  3. // 常量存储的是一个不可以变化的变量。
  4.  
  5. // 引入html-webpack-plugin 插件
  6. const HtmlWebpackPlugin = require('html-webpack-plugin');
  7.  
  8. const webpack = require('webpack');
  9.  
  10. const ExtractTextPlugin = require("extract-text-webpack-plugin");
  11.  
  12. module.exports = {
  13. entry: './src/./js/main.js', // 指定入口文件
  14. output: {
  15. path: path.resolve(__dirname, 'dist'), // 指定出口文件的路径目录
  16. // filename: 'bulid.js' // 制定出口文件的名称
  17. // path指定了本地构建地址,publicPath指定在浏览器中所引用的,指定的是构建后在html里的路径
  18. // publicPath: './',
  19. // 将入口文件重命名为带有20位的hash值的唯一文件
  20. filename: '[name].[hash].js'
  21. },
  22. module: {
  23. rules: [
  24. // 在webpack2中,loaders 被替换成了 rules 其实就是loader的规则
  25. // 实现 css 打包
  26. /*{
  27. test: /\.css$/,
  28. use: ['style-loader', 'css-loader']
  29. // test 说明了当前 loader 能处理那些类型的文件
  30. // use 则指定了 loader 的类型。
  31. // 注意:数组中的loader不能省略扩展名
  32. },*/
  33. // 实现 scss 打包
  34. {
  35. test: /\.scss$/,
  36. // 注意 是sass-loader ,不是 scss-loader
  37. use: ['style-loader', 'css-loader', 'sass-loader']
  38. },
  39. // 实现 less 打包
  40. {
  41. test: /\.less$/,
  42. use: ['style-loader', 'css-loader', 'less-loader']
  43. },
  44. // 实现 url 资源打包
  45. {
  46. // 图片文件使用 url-loader 来处理
  47. test: /\.(png|jpg|gif|ttf)$/,
  48. use: [{
  49. loader: 'url-loader',
  50. // options 为可以配置的选项
  51. options: {
  52. limit: 8192
  53. // limit=8192表示将所有小于8kb的图片都转为base64形式
  54. // (其实应该说超过8kb的才使用 url-loader 来映射到文件,否则转为data url形式)
  55. }
  56. }]
  57. //保证输出的图片名称与之前命名的图片名称保持一致(目前只是支持这样的写法, webpack3 没有响应的options进行配置)
  58. // use:'url-loader?limit=8192&name=imgs/[name].[ext]'
  59. },
  60. // 实现 ES6转 ES5
  61. {
  62. test: /\.js$/,
  63. exclude: /(node_modules)/, // exclude 排除的意思,把 node_modules文件夹排除编译之外
  64. use: {
  65. loader: 'babel-loader',
  66. options: {
  67. // presets 预设列表(一组插件)加载和使用
  68. presets: ['env'],
  69. plugins: ['transform-runtime'] // 加载和使用的插件列表
  70. }
  71. }
  72. },
  73. // 提取 css模块(如果使用这个模块的话,需要把之前的CSS打包模块注释掉,不然会重复)
  74. {
  75. test: /\.css$/,
  76. use: ExtractTextPlugin.extract({
  77. fallback: "style-loader",
  78. use: "css-loader"
  79. })
  80. }
  81.  
  82. ]
  83. },
  84. devServer: {
  85. // contentBase: './dist', // 在 localhost:8080(默认) 下建立服务,将 dist 目录下的文件,作为可访问文件 contentBase:告诉服务器从哪里提供内容
  86. // 或者通过以下方式配置
  87. contentBase: path.join(__dirname, "dist"),
  88. port: 9000, // 如果想要改端口,可以通过 port更改
  89. hot: true, // 启用 webpack 的模块热替换特性()
  90. inline: true, // 实现实时重载(实现自动刷新功能)默认情况下是 true。
  91. host: "localhost" // 如果你希望服务器外部可访问,指定使用一个 host。默认是 localhost(也就是你可以不写这个host这个配置属性)。
  92. },
  93. plugins: [
  94. // 从 bundle 中提取文本(CSS)到单独的文件
  95. new ExtractTextPlugin({
  96. // 提取css,并重名为带有 20位的hash值的唯一文件
  97. filename: '[name].[hash].css',
  98. // 将所有的独立文件模块(这里指的是css文件)合并成一个文件
  99. allChunks: true
  100. }),
  101. new HtmlWebpackPlugin({
  102. title: '首页', // 用于生成的HTML文档的标题
  103. filename: 'index.html', //写入HTML的文件。默认为index.html。也可以指定一个子目录(例如:)assets/admin.html
  104. template: 'index.html' // Webpack需要模板的路径
  105. // template: 'index.ejs' // Webpack需要模板的路径
  106. }),
  107. // 需要结合webpack-dev-server 启用热替换模块(Hot Module Replacement),也被称为 HMR
  108. new webpack.HotModuleReplacementPlugin()
  109. ]
  110. }

12、开发环境和生产环境的分离

(1)开发环境与生产环境分离的原因如下:

在开发环境中,我们使用热更新插件帮助我们实现浏览器的自动更新功能,我们的代码没有进行压缩,如果压缩了不方便我们调试代码等等,所以以上这些代码不应出现在生产环境中。
生产环境中,我们把项目部署到服务器时,我们会对代码进行各种各样的优化,比如压缩代码等等,这时候我们不应该把这些代码放到开发环境中,不利于代码开发和调试。

总结:针对以上这些说明,我们很有必要把区分开发环境与生产环境分离。

(2)开发环境的配置和生产换环境配置的区别。

开发环境有的配置,生产环境不一定有,比如说热更新时使用到的HotModuleReplacementPlugin。

生产环境有的配置,开发环境不一定有,比如说用来压缩js用的UglifyJsPlugin。

如何去做?

1> 因为webpack 默认找的是 webpack.config.js配置文件,所以要把开发环境的webpack.config.js配置文件改为webpack.dev.config.js代表开发环境的配置文件。

2> 新建一个webpack.prod.config.js,再把开发环境中的webpack.config.js复制进去(没用的配置文件该删除的删除)

3> 修改package.json文件(在scripts 标签中添加"dev"和"prod" 属性配置)

js
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --config webpack.dev.config.js",
"prod": "webpack --config webpack.prod.config.js"
},
怎样执行命令

执行开发环境的中配置
npm run dev
执行生产环境的中配置
npm run prod

13、在生产环境中配置代码压缩功能
  • 配置webpack.prod.config.js 文件

  1. / webpack.prod.config.js
  2.  
  3. var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
  4.  
  5. // ……
  6.  
  7. plugins: [
  8.  
  9. // ……
  10.  
  11. // js代码 压缩
  12. new UglifyJsPlugin({
  13. compress: {
  14. warnings: false
  15. }
  16. })
  17. ]

执行 npm run prod 命令

原文:https://blog.csdn.net/it_cgq/article/details/78732970

webpack介绍和使用的更多相关文章

  1. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  2. 一:webpack 介绍

    webpack介绍: 它是一个给JS准备的打包工具,它可以把很多的模块打包成很少的静态文件,webpack有一个自己的特性就是代码分割(Code Splitting)可以使项目只加载当时需要的文件,  ...

  3. webpack 介绍 & 安装 & 常用命令

    webpack 介绍 & 安装 & 常用命令 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webpa ...

  4. JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  5. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_09-webpack研究-webpack介绍

    使用vue.js开发大型应用需要使用webpack打包工具,本节研究webpack的使用方法. 1.3.1 webpack介绍 Webpack 是一个前端资源的打包工具,它可以将js.image.cs ...

  6. 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...

  7. webpack学习(一):webpack 介绍&安装&常用命令

    一.简单介绍 什么是Webpack Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 主要是用来打包在浏览器端使用的ja ...

  8. webpack入门(一)——webpack 介绍

    如今的网站正在演化为web应用程序: 1. 越来越多的使用JavaScript. 2. 现代浏览器提供更广泛的接口. 3. 整页刷新的情况越来越少,甚至更多代码在同一个页面.(SPA) 因此有很多代码 ...

  9. WebPack介绍

    一.Webpack 是什么 Webpack 是德国开发者 Tobias Koppers 开发的模块加载器,Instagram 工程师认为这个方案很棒, 似乎还把作者招过去了.在 Webpack 当中, ...

随机推荐

  1. MySQL分布式数据库架构:分库、分表、排序、分页、分组、实现教程

    MySQL分库分表总结: 单库单表 : 单库单表是最常见的数据库设计,例如,有一张用户(user)表放在数据库db中,所有的用户都可以在db库中的user表中查到. 单库多表 : 随着用户数量的增加, ...

  2. SSH安全优化

    更改远程连接登陆的端口 禁止root管理员直接登陆 密码认证方式改为密钥认证 重要服务不使用公网IP地址 使用防火墙来限制来源IP地址 Port 666                变更SSH服务远 ...

  3. iptables详解(2)表中规则管理(增删改查)

    我们定义了四张表:raw表.mangle表.nat表.filter表,不同的表有不同的功能 filter表用来过滤,允许哪些ip.端口访问,禁止哪些ip.端口访问,表中会有很多链 ①禁止ip地址访问我 ...

  4. github看项目-浏览器插件

    浏览器插件,使用浏览器看github项目 原文:浏览 GitHub 太卡了?教你两招!

  5. P2P system: Chord

    DHT= Distributed Hash Table store the objects(files) at nodes (hosts, machines) in a cluster. The cl ...

  6. MySQL之表连接-> 内连接,左外连接,右外链接,全连接

    1.首先创建student库 create database student; 2. 在数据库中创建boy表 和 girl表, mysql> create table boy( -> bo ...

  7. pandas 4

    参考资料:https://mp.weixin.qq.com/s/QnxaOrvlWJn6Dr42Ic1CcQ 1  #只选取housing,loan,contac和poutcometest_data[ ...

  8. 2019HDU多校第7场——构造

    题意 假设现在你在准备考试,明天的考试有 $n$ 道题目,对于分值为 $i$ 的题目至少复习 $i+1$ 小时才能做对,已知总分为$m$,求确保完成 $k$ 道题的最少时间. 分析 手动尝试一下,发现 ...

  9. 建立component的多种方法

    vue之component 在Vue.js中定义组件模板的七种方式 终于搞懂了vue 的 render 函数(一) Vuejs2.0学习(Render函数,createElement,vm.$slot ...

  10. Cashe的使用

    1.CacheHelper public class CacheHelper { public static ObjectCache Cache { get { return MemoryCache. ...