webpack入门

Posted 瓜子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack入门相关的知识,希望对你有一定的参考价值。

参考:http://www.jianshu.com/p/42e11515c10f

安装webpack:npm install webpack -g

一切皆模块

Webpack有一个不可不说的优点,它把所有的文件都可以当做模块处理,包括你的javascript代码,也包括CSS和fonts以及图片等等等,只有通过合适的loaders,它们都可以被当做模块被处理。

CSS

webpack提供两个工具处理样式表,css-loader 和 style-loader,二者处理的任务不同,css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中,二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中

......

你还记得吗?webpack只有单一的入口,其它的模块需要通过 import, require, url等导入相关位置,为了让webpack能找到”main.css“文件,我们把它导入”main.js “中,如下

//main.js
import React from \'react\';
import {render} from \'react-dom\';
import Greeter from \'./Greeter\';

import \'./main.css\';//使用require导入css文件

render(<Greeter />, document.getElementById(\'root\'));


通常情况下,css会和js打包到同一个文件中,并不会打包为一个单独的css文件,不过通过合适的配置webpack也可以把css打包为单独的文件的。
不过这也只是webpack把css当做模块而已,咱们继续看看一个真的CSS模块的实践。

CSS module

在过去的一些年里,JavaScript通过一些新的语言特性,更好的工具以及更好的实践方法(比如说模块化)发展得非常迅速。模块使得开发者把复杂的代码转化为小的,干净的,依赖声明明确的单元,且基于优化工具,依赖管理和加载管理可以自动完成
不过前端的另外一部分,CSS发展就相对慢一些,大多的样式表却依旧是巨大且充满了全局类名,这使得维护和修改都非常困难和复杂。

最近有一个叫做 CSS modules 的技术就意在把JS的模块化思想带入CSS中来,通过CSS模块,所有的类名,动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持,在CSS loader中进行配置后,你所需要做的一切就是把”modules“传递都所需要的地方,然后就可以直接把CSS的类名传递到组件的代码中,且这样做只对当前组件有效,不必担心在不同的模块中具有相同的类名可能会造成的问题。具体的代码如下

插件(Plugins)

插件(Plugins)是用来拓展Webpack功能的,它们会在整个构建过程中生效,执行相关的任务。
Loaders和Plugins常常被弄混,但是他们其实是完全不同的东西,可以这么来说,loaders是在打包构建过程中用来处理源文件的(JSX,Scss,Less..),一次处理一个,插件并不直接操作单个文件,它直接对整个构建过程其作用。

Webpack有很多内置插件,同时也有很多第三方插件,可以让我们完成更加丰富的功能。

使用插件的方法

要使用某个插件,我们需要通过npm安装它,然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例(plugins是一个数组)继续看例子,我们添加了一个实现版权声明的插件。

//webpack.config.js
var webpack = require(\'webpack\');

module.exports = {
  devtool: \'eval-source-map\',
  entry:  __dirname + "/app/main.js",
  output: {...},

  module: {
    loaders: [
      { test: /\\.json$/, loader: "json" },
      { test: /\\.js$/, exclude: /node_modules/, loader: \'babel\' },
      { test: /\\.css$/, loader: \'style!css?modules!postcss\' }//这里添加PostCSS
    ]
  },
  postcss: [
    require(\'autoprefixer\')
  ],

  plugins: [
    new webpack.BannerPlugin("Copyright Flying Unicorns inc.")//在这个数组中new一个就可以了
  ],

  devServer: {...}
}

 

通过这个插件,打包后的JS文件显示如下

知道Webpack中的插件如何使用了,下面给大家推荐几个常用的插件

htmlWebpackPlugin

这个插件的作用是依据一个简单的模板,帮你生成最终的Html5文件,这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。

安装

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

Hot Module Replacement

Hot Module Replacement(HMR)也是webpack里很有用的一个插件,它允许你在修改组件代码后,自动刷新实时预览修改后的效果。
在webpack中实现HMR也很简单,只需要做两项配置

  1. 在webpack配置文件中添加HMR插件;
  2. 在Webpack Dev Server中添加“hot”参数;

不过配置完这些后,JS模块其实还是不能自动热加载的,还需要在你的JS模块中执行一个Webpack提供的API才能实现热加载,虽然这个API不难使用,但是如果是React模块,使用我们已经熟悉的Babel可以更方便的实现功能热加载。

...

 

以上是关于webpack入门的主要内容,如果未能解决你的问题,请参考以下文章

webpack4常用片段

webpack书本总结,入门webpack必备

webpack书本总结,入门webpack必备

webpack 入门2

webpack入门介绍

前端入门 —— 了解 webpack 和 各类插件的配置