[关闭]
@Lxyour 2017-05-31T14:47:29.000000Z 字数 6581 阅读 1443

WebPack新手入门教程

WEB-Build

什么是webpack

webpack的官网: http://webpack.github.io/ ，
文档地址: http://webpack.github.io/docs/
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
此处输入图片的描述

拓展阅读：
一小时包教会 —— webpack 入门指南
webpack入门
入门Webpack，看这篇就够了
Webpack从入门到上线

一、安装

我们常规直接使用 npm 的形式来安装。
全局安装：

  1. //执行全局安装
  2. $ npm install -g webpack
  3. //安装成功后
  4. /usr/local/bin/webpack -> /usr/local/lib/node_modules/webpack/bin/webpack.js
  5. /usr/local/lib
  6. └─┬ webpack@1.13.2 
  7.   ├─┬ enhanced-resolve@0.9.1
  8.   │ └── graceful-fs@4.1.6 
  9.   ├─┬ memory-fs@0.3.0
  10.   │ └── readable-stream@2.1.5 
  11.   └─┬ node-libs-browser@0.6.0 
  12.     └─┬ buffer@4.9.1 
  13.       └── base64-js@1.1.2

当然如果常规项目还是把包依赖写入 package.json 里更人性化：

  1. //初始化项目依赖
  2. $ npm init

安装到你的项目目录：

  1. $ npm install --save-dev webpack

执行完之后项目根目录会多了名字为node_modules的文件夹，并包含了很多node包

安装加载器（Loaders）

比如安装url-loader

  1. npm install url-loader --save-dev

二、配置

每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。
示例：

  1. var webpack = require('webpack');
  2. var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
  4. module.exports = {
  5.     //插件项
  6.     plugins: [commonsPlugin],
  7.     //页面入口文件配置
  8.     entry: {
  9.         index : './src/js/page/index.js'
  10.     },
  11.     //入口文件输出配置
  12.     output: {
  13.         path: 'dist/js/page',
  14.         filename: '[name].js'
  15.     },
  16.     module: {
  17.         //加载器配置
  18.         loaders: [
  19.             { test: /\.css$/, loader: 'style-loader!css-loader' },
  20.             { test: /\.js$/, loader: 'jsx-loader?harmony' },
  21.             { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
  22.             { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
  23.         ]
  24.     },
  25.     //其它解决方案配置
  26.     resolve: {
  27.         root: 'E:/github/flux-example/src', //绝对路径
  28.         extensions: ['', '.js', '.json', '.scss'],
  29.         alias: {
  30.             AppStore : 'js/stores/AppStores.js',
  31.             ActionType : 'js/actions/ActionType.js',
  32.             AppAction : 'js/actions/AppAction.js'
  33.         }
  34.     }
  35. };

配置说明：
context：上下文。
entry：入口文件，是所有依赖关系的入口，webpack从这个入口开始静态解析，分析模块之间的依赖关系。
output：打包输出的配置。
devtools：SourceMap选项，便于开发模式下调试。
watch：监听模式，增量更新，开发必备！
profile：优化。
cache：webpack构建的过程中会生成很多临时的文件，打开cache可以让这些临时的文件缓存起来，从而更快的构建。
module.loaders：如前文介绍，loaders用来对文件做预处理。这样webpack就可以打包任何静态文件。
resolve.alias：模块别名，这样可以更方便的引用模块。
plugins：如前文介绍，webpack的一些内置功能均是以插件的形式提供。

阅读更多：Webpack配置从零到一

三、运行

执行下列命令即可：

  1. $ webpack --display-error-details

参数“--display-error-details”是推荐加上的，方便出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。
其他主要的参数有：

  1. $ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包
  3. $ webpack --watch   //监听变动并自动打包
  5. $ webpack -p    //压缩混淆脚本，这个非常非常重要！
  7. $ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了

其中的 -p 是很重要的参数，曾经一个未压缩的 700kb 的文件，压缩后直接降到 180kb（主要是样式这块一句就独占一行脚本，导致未压缩脚本变得很大）。

使用webpack构建本地服务器

  1. npm install --save-dev webpack-dev-server

安装加载器（Loaders）

  1. npm install --save-dev json-loader

Babel的安装与配置

  1. npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

现在你的webpack的配置已经运行你使用ES6以及JSX的语法了。继续用上面的例子进行测试，不过要使用React，不要忘了先安装 React 和 React-DOM

  1. npm install --save react react-dom

使用ES6的语法，更新Greeter.js并返回一个React组件

  1. //Greeter,js
  2. import React, {Component} from 'react'
  3. import config from './config.json';
  5. class Greeter extends Component{
  6.   render() {
  7.     return (
  8.       <div>
  9.         {config.greetText}
  10.       </div>
  11.     );
  12.   }
  13. }
  15. export default Greeter

使用ES6的模块定义和渲染Greeter模块, main.js文件：

  1. import React from 'react';
  2. import {render} from 'react-dom';
  3. import Greeter from './Greeter';
  5. render(<Greeter />, document.getElementById('root'));

与gulp配合

安装

  1. $ npm install gulp --save-dev  //安装gulp
  2. $ npm install gulp-util --save-dev  //安装gulp-util
  3. $ npm install webpack-dev-server --save-dev   //安装webpack开发服务

引入

在项目根目录新建gulpfile.js文件，引入相关内容

  1. var gulp = require('gulp');
  2. var gutil = require('gulp-util');
  3. var webpack = require('webpack');
  4. var webpackDevServer = require('webpack-dev-server');
  5. var config = require('./webpack.config.js');

我们可以将也webpack.config.js文件引入，传入webpack({})，也可以只需把配置写到 webpack({ ... }) 中去即可，无须再写 webpack.config.js

创建gulp任务

  1. gulp.task("webpack", function(callback) {
  2.     // run webpack
  3.     webpack({
  4.         // configuration 可以把webpack.config.js内容放入这里
  5.     }, function(err, stats) {
  6.         if(err) throw new gutil.PluginError("webpack", err);
  7.         gutil.log("[webpack]", stats.toString({
  8.             // output options
  9.         }));
  10.         callback();
  11.     });
  12. });

完整的gulp配置

一个基于webpack-dev-server的gulpfile.js基本配置文件：

  1. var gulp = require('gulp');
  2. var gutil = require('gulp-util');
  3. var webpack = require('webpack');
  4. var webpackDevServer = require('webpack-dev-server');
  5. var config = require('./webpack.config.js');
  7. var devStats = {
  8.     colors: true,
  9.     reasons: false,
  10.     chunks: false, //屏蔽(react)模块的一些明细
  11.     chunkModules: false,
  12.     chunkOrigins: false,
  13.     modules: false,
  14.     cached: false,
  15.     cachedAssets: false,
  16.     children: false,
  17.     warning: false
  18. };
  20. gulp.task('webpack', function (callback) {
  21.     var compiler = webpack(config)
  22.     var serverConfig = {
  23.         hot: true,
  24.         contentBase: 'dist',
  25.         stats: devStats
  26.     };
  27.     new webpackDevServer(compiler, serverConfig).listen(8080, "localhost", function(err) {
  28.         if(err) throw new gutil.PluginError("webpack-dev-server", err);
  29.         // Server listening
  30.         gutil.log("[webpack-dev-server]", "http://localhost:8080");
  32.         // keep the server alive or continue?
  33.         // callback();
  34.     });
  35. })

启动gulp

通过创建gulp任务启动webpack-dev-server，webpack-dev-server会将打包好的文件临时储存在内存中，需要通过http请求，如：

  1. //启动gulp任务来执行webpack-dev-server
  2. $ gulp webpack
  4. //在地址栏输入
  5. http://loaclhost:8080/index.html

一个常见的Webpack配置文件

首先准备一下该配置文件需要安装的插件

  1. $ npm install html-webpack-plugin --save-dev
  2. $ npm install extract-text-webpack-plugin --save-dev
  3. $ npm install autoprefixer --save-dev
  4. $ npm install style-loader --save-dev
  5. $ npm install babel-loader babel-core --save-dev

一个常见的Webpack配置文件：

  1. var webpack = require('webpack');
  2. var HtmlWebpackPlugin = require('html-webpack-plugin');
  3. var ExtractTextPlugin = require('extract-text-webpack-plugin');
  5. module.exports = {
  6.     watch: true, //监听变化自动编译
  7.     //文件入口配置
  8.     entry: __dirname + "/src/index.js",
  9.     //文件输出配置
  10.     output: {
  11.         path: __dirname + "/dist",
  12.         filename: "[name]-[hash].js"
  13.     },
  14.     //加载器配置
  15.     module: {
  16.         loaders: [
  17.             {
  18.                 test: /\.json$/,
  19.                 loader: "json"
  20.             }, 
  21.             {
  22.                 test: /\.js$/,
  23.                 exclude: /node_modules/,
  24.                 loader: 'babel'
  25.             }, 
  26.             {
  27.                 test: /\.css$/,
  28.                 loader: ExtractTextPlugin.extract('style', 'css?modules!postcss')
  29.             }, 
  30.             {
  31.                 test: /\.scss$/,
  32.                 loader: 'style!css!sass?sourceMap'
  33.             },
  34.             {
  35.                 test: /\.(png|jpg)$/,
  36.                 loader: 'url-loader?limit=8192'
  37.             }
  38.         ]
  39.     },
  40.     postcss: [
  41.         require('autoprefixer')
  42.     ],
  43.     //插件项
  44.     plugins: [
  45.         new HtmlWebpackPlugin({
  46.             template: __dirname + "/app/index.tmpl.html"
  47.         }),
  48.         new webpack.optimize.OccurenceOrderPlugin(),
  49.         new webpack.optimize.UglifyJsPlugin(),
  50.         new ExtractTextPlugin("[name]-[hash].css")
  51.     ],
  52.     //其它解决方案配置
  53.     resolve: {
  54.         root: 'E:/github/flux-example/src', //绝对路径
  55.         extensions: ['', '.js', '.json', '.scss'],
  56.         alias: {
  57.             AppStore: 'js/stores/AppStores.js',
  58.             ActionType: 'js/actions/ActionType.js',
  59.             AppAction: 'js/actions/AppAction.js'
  60.         }
  61.     }
  62. }

一些报错

  1. Module not found: Error: Can't resolve 'css' in 'E:\xxx\xxx'

原因：没有装css-loader，解决方案：执行npm install css-loader --save

  1. Module not found: Error: Can't resolve 'sass' in 'E:\xxx\xxx'

原因：没有装sass-loader，解决方案：执行npm install sass-loader --save

  1. WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
  2. configuration.resolve has an unknown property 'modulesDirectories'.

原因：resolve的API变了，，解决方案： 将modulesDirectories改成modules， 参考

  1. Module build failed: No input specified: provide a file name or a source string to process

原因：WebPack的API变了，解决方案： 参考

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注