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

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

变化

  1. 开发配置省略了优化(optimize)配置,因为在我们不断地重构改造我们的项目时,这些优化配置都是不必要的开销。所以开发环境的配置没有webpack.optimize插件。

  2. 开发配置是开发服务器所必要的配置,你可以阅读更多关于这里

总结:

  • entry: 两个2新的连接服务器的入口配置到浏览器允许HMR。
  • devServer
    • contentBase: 服务器文件位置
    • hot: 是否使用HMR

生产环境的配置变化不大:

// webpack.config.prod.jsvar path = require('path')var webpack = require('webpack')var HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {
  devtool: 'source-map',
  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']
    }]
  }
}

我此次增加了一个全新的属性包括开发配置和生产配置:

  • devtool - 这是一个调试工具。基本上,当你出现一个错误,他将帮助你看清楚关于错误的信息,比如chrome开发者控制台。不同的是source-mapcheap-eval-source-map更难从文档中搜集。我肯以肯定的说source-map对生产意味着是一个很大的开销。而cheap-eval-source-map相较是更少的开销,意味着只能开发中使用。

运行dev开发服务器必须要运行

webpack-dev-server --config webpack.config.dev.js

构建生产代码我们需要运行

webpack --config webpack.config.prod.js

T让我们使用得更简单一点,我们现在可以使用一个简单的任务让package.json运行,我们不需要打任何命令。

我们将脚本属性添加到配置

// package.json{  //...
  "scripts": {    "build": "webpack --config webpack.config.prod.js",    "dev"  : "webpack-dev-server --config webpack.config.dev.js"
  }  //...}

我们可以运行这些命令:

npm run build
npm run dev

现在我们可以通过运行npm run dev来看到你美丽的网站,导航到http://localhost:8080.

注意: 当我测试这部门时我发现服务器不会实时重载我修的index.html文件。解决这个问题的办法是html-reload。这是一些有用的信息,包括一些webpack的配置选项,我推荐你看,我把它们分开了,因为我觉得它延长了教程可能导致很琐碎。

开始编码

Example 7

人们之所以对webpack看起来很紧张是因为我们需要懂得这一些过程才能让我们开始写javascript代码。好了,现在我们已经完成了这个过程,到了教程的高潮部分。

万一你还没有:运行npm run dev,并导航到http://localhost:8080。构建一个实时重载服务器不能显示。每一次都可以节省你修改你项目任何部分时的时间,浏览器将会重新加载来显示你的改变。 我们也需要一个 新的npm package来说明你可以使用他们在你的前端当中。

npm install --save pleasejs

PleaseJs是一个随机颜色生成器,我们要安装我们的按钮来改变div的颜色。

// index.js// Accept hot module reloadingif (module.hot) {  module.hot.accept()
}require('./styles.css') // The page is now styledvar Please = require('pleasejs')var div = document.getElementById('color')var button = document.getElementById('button')function changeColor() {  div.style.backgroundColor = Please.make_color()
}button.addEventListener('click', changeColor)

有趣的是,为了使实时加载模块工作,我们需要包含这些代码:

if (module.hot) {  module.hot.accept()
}

在一个模块或者这个模块的父级中。

我们已经完成了!

注意: 你可能到了你的css被应用事后的延迟,你可能会讨厌你的css被包含在js文件当中。我留出一个例子,css-extract(提取),描述如何把你的css放进一个不同的文件中。

结论

我希望能帮助到你们。

webpack首先是一个模块打包器。它是一个高度模块化和易用的工具,在事实上,他不限用于ES6和React。

Now given that

  • 第二部分将使用webpack通过Babel去转译ES6到ES5的语法。
  • 第三部分将使用webpack和React+Babel

因为它们都是最常见的用例。

最后的想法

祝贺你!你做了一个按钮去改变div的颜色!webpack是不是很强大?

是的。但是,如果你做的是一个按钮,去改变div的颜色,他是不可能匹配写配置的价值的。如果你这样做,你可能会…很累 :anguished:



回复列表



回复操作






发布时间:2016-04-29 18:00:25

修改时间:2016-04-29 18:00:25

查看次数:986

评论次数:12

TA的文章总数

37