Webpack模块化

Nov 26 2016

Webpack模块化的实践

Webpack 是德国开发者 Tobias Koppers 开发的模块加载器，在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等，对应各种不同文件类型的资源, Webpack 有对应的模块 loader，Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

一步一步来配置

它的配置文件是 webpack.config.js.

// webpack.config.js
module.exports = {
  entry: {
    bundle1: './main1.js',
    bundle2: './main2.js'
  },
  output: {
    filename: '[name].js'
  }
};

Webpack 允许你在js文件中require CSS , 通过 CSS-loader来预处理css文件.

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      { test: /\.css$/, loader: 'style-loader!css-loader' },
    ]
  }
};

你需要使用loaders来转换CSS 文件. 第一个是 CSS-loader 来读取CSS文件, 另外一个是Style-loader 是将style样式插入到html中，用！连接。
同样，Webpack 允许你在js文件中require图片 , 通过 url-loader和file-loader来预处理图片文件.

Webpack 可以使用UglifyJs Plugin 处理js。

var webpack = require('webpack');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new uglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};

还可以使用html-webpack-plugin 创建 index.html ，open-browser-webpack-plugin 打开浏览器。

var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Webpack-demos',
      filename: 'index.html'
    }),
    new OpenBrowserPlugin({
      url: 'http://localhost:8080'
    })
  ]
};

还有热更新之类的各种插件等你玩哦~~如果喜欢用JS管理一切资源，那webpack真是必备神器了！

当然还要记得webpack的命令行：

• webpack – 构建文件
• webpack -p – 发布
• webpack –watch – 监听项目
• webpack -d – 包含 source maps方便调试
• webpack –colors – 让打包界面更好看

构建项目的时候, 你可以把启动项写进package.json。

// package.json
{
  // ...
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors",
    "deploy": "NODE_ENV=production webpack -p"
  },
  // ...
}

然后跑起来吧~

npm run dev

Javascript

webpack