switching to webpack -- 初探webpack

时间 2019-12-05

标签 switching webpack 初探繁體版

原文原文链接

假设咱们如今有以下文件结构css

index.html
master.css
rotate.js

在 index.html 咱们就引入了剩余两个文件。如今，咱们想利用 webpack 来进行打包。把 css 和 js 放入一个文件中，这样咱们在 index.html 中就只须要引入一个文件即可以了。html

index.html
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>wp</title>
  <link rel="stylesheet" href="master.css">
  <script src="rotate.js" charset="utf-8" defer></script>
</head>

怎么作呢？首先咱们建立一个入口文件 entry.js ,在这个文件中咱们把 css 和 js 引入，然后只须要在 index.html 只引入一个文件 entery.js 。在 entery.js 怎么引入 js 和 css 呢？前端

index.html
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>wp</title>
  <script src="bundle.js" charset="utf-8" defer></script>
</head>

//entry.js
require('./rotate.js');
require('./master.css');

先安装 npm install webpack --save-dev 运行 webpack entry.js bundle.js 。报错：构建 master.css 的任务失败了。这是由于在 node 的模块系统中，只有 js 文件可使用 require 语法引入,因此 css 引入就是失败的。怎么办呢？在 webpack 中有一个东西专门处理除 js 之外文件的引入 -- loader工具。就像名字所表达的， loader 负责加载处理其它格式的文件， CoffeeScript、 JSX、 LESS、JSON 等等。若是你写的是 SASS，一样引入到 enter.js 后， index.html 是没法识别的，而 loader 还能够先把你写好的 SASS 转换成 css 而后再引入。这样你就没必要在写好 SASS 后再经过 gulp 或 grunt 等工具把他们转换成 css ,而后再用loader引入了。node

好了，怎么写呢，首先使用 npm 下载 css 和 style 的 loader。 npm install style-loader css-loader 而后在 entry.js 就能够这样引入css了。jquery

//entry.js
require('./rotate.js');
require('!style!css!./master.css');

运行 webpack entry.js bundle.js 构建成功，咱们刷新页面发现， css、 js 都被引入了。ok, 因此当咱们有不少须要引入的文件时均可以先在entry.js中引入，而后在index.html中引入一个entry.js就能够了。
这么算下来， webpack只是把咱们本来须要在 head 中引入的文件放到了 entry.js 中引入而已，那它到底有什么优点呢？webpack

正如咱们前面所说， webpack 能够利用 loader 引入各类文件，咱们只须要下载相应的 loader 即可以实现这些步骤。这些都须要更详细地配置，因此咱们如今对 webpack 任务进行配置新建一个 webpack.config.js 配置以下git

module.exports = {
  entry: '/entry.js', //全部入口文件
  output: {
    path: __dirname,
    filename: 'bundle.js' //自动生成的打包文件
  },

  module: {              //全部加载器都在一个module中
    loaders: [
      { test: /\.css$/,       //正则匹配
        loader: 'style!css',  //样式和css加载器
        include: paths        //限制匹配路径，不然会匹配全部符合test的文件，增长打包时间
      }
    ]
  }
}

配置好 webpack.config.js 后，咱们只须要输入 webpack 就作到了咱们之前输入 webpack entry.js bundle.js 同样的效果。并且在 entry.js 中咱们对 css 的引用也能够写为像引入 js 文件同样再也不须要加 !style!css! 这样的前缀了。es6

//entry.js
require('./rotate.js');
require('./master.css');

值得一提的是，若是咱们在 rotate.js 中还导入了另外一个 js 文件或模块， webpack 也会把它引入。意思是说， webpack 不只只导入了 require 的文件，还能解析那些在 require 文件里全部的依赖。例如，我在 rotate.js 中使用了 jquery ,我只须要在 rotate.js 中再 require('./jquery.js') 就能够了。省心省力。github

上面咱们简单了解了 webpack 在普通开发中用到的技巧，你会发现这些技巧利用其余构建工具也能够实现。也并无增长多少效率。是的，在简单文件结构中，还体现不出 webpack 的优点。但在复杂的项目中文件层级嵌套很深，管理起来依赖会很是麻烦，对各类库的引用层出不穷，而此时 webpack 带来的这种模块构建模式将会很是有用。咱们不须要手动计算每一个文件的依赖，使用时只须要 require 一下就 ok 了。web

上一节咱们从实际开发的小项目出发，了解了 webpack 带来的一些变化。这一节咱们深刻挖掘 loader，看看 loader 究竟能为咱们带来什么。

就如上节所了解的，在 webpack 中能够像 nodejs 同样以模块的形式引入各种 js 文件，但在一个前端项目里，不只仅有 js 文件，有多是 CoffeeScript、 JSX、 LESS、JSON、SCSS、JPG、PNG 这些文件利用 node 的模块系统是没法引入的，loader 就是来解决这类问题的--让其它种类的文件像是 js 同样被导入，这就须要各式各样的 loader 了。 loader 本质上也是一个模块，它的功能就是转换各类资源为 nodejs 中可导入的模块 -- 把其余资源搞成统一的模块。

假设咱们如今的工做目录以下

index.html
master.scss
rotate.js
entry.js

由于有 scss 文件的存在，html 没法解析 scss 咱们须要对 scss 进行编译。传统的方法是使用 gulp 或 grunt 先对 master.scss 进行编译压缩，再被 index.html引入，而 loader 的存在即是简化了这些步骤，当咱们能够把 scss 文件以模块的形式导入后，咱们即可以以模块的形式对其进行编译，就像在 gulp 中的 .pipe(sass()) 同样,但这更符合流的思想，没有中间的断层 -- 咱们不须要dest文件储存咱们编译为 css 的 scss 文件。文件仍是这三个文件，但通过 loader 便省去了不少链接工做。 ok ,下面开始。

首先咱们须要下载 sass 的 sass-loader, npm install sass-loader node-sass --save-dev , entry.js 中这样写

require('!style-loader!css-loader!sass-loader! ./master.scss');
require('./rotate.js')

咱们发现咱们不能像引入css同样再在 entry.js 写 require(./scss) 了 ( sass-loader 文档中没有提出这种更简洁的写法)。在 webpack.config.js 中配置 sass-loader

{test: /\.scss$/, loader: [ 'style', 'css', 'sass' ]},

ok,执行 webpack ，打开 index.html 咱们发现 scss 中写的样式被成功解析了。就这么简单。

在 js 里咱们使用了ES6语法，也须要被编译为ES5，怎么办呢？仍是loader。 babel-loader, npm install babel-loader babel-core babel-preset-es2015 --save-dev ，在 webpack.config.js 中配置

{  test: /\.js$/,
   exclude: /(node_modules|bower_components)/,
   loader: 'babel-loader',
   query: {
     presets: ['es2015']
   }
}

ok, scss 和 es6 都被编译引入了。啥，你还须要压缩？(loader的功能正如其名，主要是把资源搞成模块同样的) 压缩、lint、拼接图片等等这种活须要另外一个工具来完成-- plugins。

这一节咱们一块儿来探究 webpack 中的plugins ，它主要负责完成 loader 完成后的剩余任务。 webpack 其实已经内置了一些插件，你们常见的如 uglifyjs 压缩js文件，它是webpack内置的插件，咱们能够不配置 plugins 而直接运行 webpack -p 来对 bundle.js 进行压缩，也能够先配置plugins再运行 webpack 执行压缩。

如今，咱们在 webpack.config.js 文件中导入 webpack const webpack = require('webppack') 配置 plugins 选项。执行 webpack 会发现文件大小被缩小了。

plugins: [
  new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false  //默认 true 在输出台输出一些警告
    },
    mangle: true      //默认 true 在压缩过程当中压缩变量名
  })
]

基本的操做步骤就是这些，咱们从手边的小项目开始，由之前的各类构建方式切换到了 webpack 模式。工做流的思想更加明确了，相比 gulp 而言 webpack 也更加流畅。固然这只是一个简单的开始，对于模块按需加载，懒加载，热更新、发布等等这些高级技巧还须要多多实践才能体会。相信随着更多的实践你对 “webpack 究竟给咱们带来的什么？” 会有本身更明确的答案。

学些资源：

webpack 中文简介

webpack 官方插件列表

webpack 单页面应用实战

1. webpack 初探
2. webpack初探
3. webpack-hot-middleware初探
4. gulp和webpack初探
5. Mac下Webpack初探
6. [webpack]初览webpack
7. React+ES6+Less+Bootstrap----webpack初探
8. pwa+webpack，初探与踩坑
9. webpack初探——js打包
10. Angular踩坑之路：初探webpack
更多相关文章...
• 探索Redis事务回滚 - Redis教程
• traceroute命令进行路由跟踪 - TCP/IP教程
• 适用于PHP初学者的学习线路和建议
• 算法总结-股票买卖