简单易懂的webpack入门教程(二)

简单易懂的webpack入门教程(二)

引入插件

Example 3

想象一下,我们使用Webpack来一起打包我们全部的文件,现在我们知道它们全部打包在一起会有900KB。去缩小我们的捆版好的打包文件是一个问题。因为我们需要使用一个之前提到过的叫UglifyJsPlugin的插件。

此外,我们必须得在本地安装Webpack以使用插件。

npm install --save-dev webpack

现在我们可以引入webpack来缩小我们的代码。

// webpack.config.jsvar path = require('path')var webpack = require('webpack')module.exports = {
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },

  plugins: [    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    })
  ]
}

我们来看看这个新特性:

这一次,当我们运行Webpack时,现在因为我们有UglifyJsPlugin插件,这可以通过比如删除所有空格,可以减少我们本来的900KB文件到200KB。

我们还可以添加OccurenceOderPlugin插件OccurenceOrderPlugin

通过计算模块出现次数来分配模块。这个经常被使用可以较快地获得模块。这使得模块可以预读,建议这样可以减少总文件大小。

事实上,我们是不知道它背后的机制的,但是在目前的测试的webpack2中已经被默认包含了,所以我们不妨引用它。

// webpack.config.jsvar path = require('path')var webpack = require('webpack')module.exports = {
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    }),    new webpack.optimize.OccurenceOrderPlugin()
  ]
}

所以现在我们已经谢了一个配置,使用我们能够缩小和打包我们的javascript。这个打包文件可以复制并粘贴到另一个项目文件中,并被扔进一个<script>标签中。你可以跳到这个结论,如果你只在乎这个使用webpack仅仅是javascript的基础知识。

一个更完整例子

另外,因为webpack还能做不仅仅只是关于javascript的工作,我们可以避免复制粘贴和使用webpack管理我们的整个项目。

在接下来的部分中,我们将使用webpack来创建一个非常简单的网站。如果你希望跟随这个例子,可以创建一个如下的目录结构:

MyDirectory
|- dist
|- src
   |- index.js
   |- index.html
   |- styles.css
|- package.json
|- webpack.config.js

内容

  1. 介绍加载器(loaders) -我们将增加加载器,来允许我们添加css到我们的打包中。
  2. 添加更多插件(plugins) - 我们将添加一个插件来帮助我们 创建/使用 一个HTML文件。
  3. 开发服务器 - 我们会把我们的webpack配置分割独立的开发和生产文件。然后使用webpack–dev-server 来查看我们的网站,使它能够HMR。
  4. 开始编码 - 我们将会写一些javascript

介绍装载器

Example 4

在前面的教程中,我提到了加载器(#loaders).。这将有助于在我们的代码中引用非js文件。在这种情况下,我们将需要style-loadercss-loader。首先 我们需要安装这些加载器:

npm install --save-dev style-loader css-loader

现在,安装好了它们之后我们可以调整我们的的配置把这些css的加载器包含进来:

// webpack.config.jsvar path = require('path')var webpack = require('webpack')module.exports = {
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    }),    new webpack.optimize.OccurenceOrderPlugin()
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    }]
  }
}

我们来理解这些新特性:

  • module - 影响我们的文件的选项
    • loaders - 一个我们为应用程序指定的一个加载器的数组
      • test - 一个正则表达式,将加载器和文件匹配
      • loaders - 该正则匹配的文件应用的加载器

当你运行WebPACK,如果你rquire一个.css文件,那么我们将请用stylecss的加载器,来打包添加CSS

如果没有加载器,那么我们会得到一个这样的错误:

ERROR in ./test.css
Module parse failed: /Users/Developer/workspace/tutorials/webpack/part1/example1/test.css
Line 1: Unexpected token {
You may need an appropriate loader to handle this file type.

可选

如果你想使用SCSS来代替CSS,你需要运行:

npm install --save-dev sass-loader node-sass webpack

你的加载器将改写成这个样子:

{
  test: /\.scss$/,
  loaders: ["style", "css", "sass"]
}

这个过程和LESS差不多。

识别的一个重要的点是,这些加载器需要指定一个特定顺序。在上面的例子中,这个sass-loader是优先作用于我们的.scss文件,然后是css-loader,最后是style-loader。正如所见,该模式是应用加载器的优先级从右向左的。

添加更多的插件

Example 5

现在我们有基础的构建在我们的网站,我们需要一个实际的页面样式。我们将会通过html-webpack-plugin插件,来生成一个HTML页面或者一个已经存在的。我们将使用一个已存在的文件。

首先我们安装插件:

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

然后我们需要添加它到我们的配置

// webpack.config.jsvar path = require('path')var webpack = require('webpack')var HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    }),    new webpack.optimize.OccurenceOrderPlugin(),    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    }]
  }
}

这一次,当我们运行webpack,因为我们指定了一个HtmlWebpackPlugin 的插件和./src/index.html模版,他将生成一个index.html的文件在我们的dist文件夹有./src/index.html的内容。

如果我使用index.html作为模版,并且他是空的。实际上现在就是一个很好填充它的机会。

<html>
<head>
  <title>Webpack Tutorial</title>
</head>
<body>
  <h1>Very Website</h1>
  <section id="color"></section>
  <button id="button">Such Button</button>
</body>
</html>

请注意,我们没有把bundle.js作为一个<script>标签放进我们的html当中。这个插件实际上会自动帮我们做这个。如果你插入了script标签,你将会导致你相同的代码加载两次。

接下来让我们在style.css中添加一些基本的样式:

h1 {  color: rgb(114, 191, 190);  text-align: center;
}#color {  width: 300px;  height: 300px;  margin: 0 auto;
}button {  cursor: pointer;  display: block;  width: 100px;  outline: 0;  border: 0;  margin: 20px auto;
}

开发服务器

Example 6

现在我们要在浏览器中看到我们的网站,他需要一个网络服务器来服务我们的代码。方便的是webpack自带的webpack-dev-server,你需要在本地和全局都安装。

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

开发服务器是一个非常有用的资源让你的王章看起来想在浏览器中,以便更快的开发。默认情况下,你可以访问http://localhost:8080来访问。不幸的是,如果箱子的热加载功能不工作,则需要一些更多的配置。

这是一个很好的实例来分割我们的webpack配置在一个用于开发一个用于生产。因为我们我们这是一个简单的教程,这不会是一个巨大的差异,但是这是一个介绍webpack差异配置性的介绍。我们将命名他们为webpack.config.dev.jswebpack.config.prod.js

// webpack.config.dev.jsvar path = require('path')var webpack = require('webpack')var HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {
  devtool: 'cheap-eval-source-map',
  entry: [    'webpack-dev-server/client?http://localhost:8080',    'webpack/hot/dev-server',    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [    new webpack.HotModuleReplacementPlugin(),    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    }]
  },
  devServer: {
    contentBase: './dist',
    hot: true
  }
}


回复列表



回复操作






发布时间:2016-04-29 17:58:55

修改时间:2016-04-29 17:59:52

查看次数:2027

评论次数:238

TA的文章总数

37