webpack入门教程

注:本文内容比较基础,供初学者快速入门参考。

更多详细信息请参考官方文档

本文同步发布于我的博客,欢迎关注^_^

1. 安装

npm install -g webpack

2. 基本使用

假设项目文件结构如下:

/app
  |--index.html
  |--main.js
  |--mymodule.js

index.html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="./app.js"></script>
</body>
</html>

main.jsmymodule.js代码如下:

// main.js
require(‘./mymodule.js‘)();

// mymodule.js
module.exports = function() {
    document.write(‘hello webpack‘);
};

然后执行命令:

webpack main.js app.js

会打包生成app.js文件。

3. 配置文件

每次手动输入源文件名和输出文件名比较麻烦,可以使用配置文件来进行管理。在app目录下新建webpack.config.js文件,内容如下:

module.exports = {
    entry: ‘./main.js‘,
    output: {
        filename: ‘app.js‘
    }
};

然后执行

webpack

就会自动生成打包好的文件了。

但是这样每次改了源文件之后都需要手动执行命令,可以通过添加watch来自动检测文件变化并重新打包。配置文件修改如下:

module.exports = {
    entry: ‘./main.js‘,
    output: {
        filename: ‘app.js‘
    },
    watch: true
};

配置文件中可以进行其它各种功能的相关配置,详情可以参看官方文档

4. 使用loader

很多模块打包工具只是针对js文件,而webpack的强大之处在于将模块的概念进行了扩展,认为一切静态文件都是模块,包括css、html模板、字体、CoffeeScript等等。虽然webpack本身依然是只能够处理js文件,但是通过一系列的loader,就可以处理其它文件了。

下面以css-loaderstyle-loader为例,演示如何打包样式文件。首先执行如下命令安装依赖模块:

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

然后在app目录下新建style.css文件,内容如下:

body {
    background: red;
}

然后修改main.js如下:

require(‘./mymodule.js‘)();
require(‘style!css!./style.css‘);

因为webpack不能够直接处理css文件,因此在require语句中需要指明需要的loader,一个文件可以经由多个loader依次处理,loader与loader之间,以及loader与文件名之间用!分隔。在这个例子中,也可以看出,如果使用了多个loader的话,数据流向是从右向左的,也就是从style.css开始,依次经过css-loaderstyle-loader

但是假如有多个css文件的话,每个require语句都需要加上loader说明,很不方便,因此可以在webpack.config.js文件中进行配置,配置如下:

loaders: [{
    test: /\.css$/,
    loader: ‘style!css‘
}]

// or

loaders: [{
    test: /\.css$/,
    loaders: [‘style‘, ‘css‘]
}]

关于loader的更多信息,可以参考:

5. 外部依赖

现在假如该例子中需要用到angular,首先在index.html中通过<script>标签引入angular库,然后修改mymodule.js如下:

var angular = require(‘angular‘);
angular.module(‘MyModule‘, []);

此时如果执行webpack命令会报如下错误:

ERROR in ./mymodule.js
Module not found: Error: Cannot resolve module ‘angular‘ in /xxx/xxx/app
 @ ./mymodule.js 1:14-32

这是因为webpack无法解析angular依赖模块,此时需要在配置文件中对外部依赖进行配置:

externals: {
    ‘angular‘: true
}

更多信息参考configuration#externals

6. 输出类型

现在假如我们希望打包后的文件作为一个单独的库,并且遵循AMD规范可以被被requirejs来使用,可以修改配置文件如下:

output: {
    filename: ‘app.js‘,
    library: ‘app‘,
    libraryTarget: ‘amd‘
}

此时输出的app.js结构如下:

define("app", ["angular"], function( /* ... */ ) {
    /* ... */
});

通过配置output.libraryTarget,可以自定义输出的模块类型,包括AMD,CommonJS,变量等多种输出类型。具体可以参考configuration#output

7. 多文件

现在假如项目目录结构如下:

/app
  |--components.js
  |--index.html
  |--main.js
  |--mymodule.js

其中mymodule.jsmain.jscomponents.js所使用。假如我们希望main.js输出为app.js,而components输出为app.components.js,则可以修改配置文件如下:

entry: {
    app: ‘./main.js‘,
    ‘app.coomponents‘: ‘./components.js‘
},
output: {
    filename: ‘[name].js‘
}
时间: 2024-11-05 06:23:21

webpack入门教程的相关文章

Webpack 入门教程

Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 本章节基于 Webpack3.0 测试通过. 从图中我们可以看出,Webpack 可以将多种静态资源 js.css.less 转换成一个静态文件,减少了页面的请求. 接下来我们简单为大家介绍 Webpack 的安装与使用. 安装 Webpack 在安装 Webpack 前,你本地环境需要支持 node.js. 由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令

Webpack入门教程十六

84.HtmlWebpackPlugin的chunks的配置,webpack.config.js文件修改如下 var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:{ 'Greeter':__dirname + "/app/Greeter.js", 'a':__dirname + "/app/a.js&

Webpack入门教程十七

88.在HtmlWebpackPlugin中使用excludeChunks项,修改webpack.config.js文件,修改内容如下 var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:{ 'Greeter':__dirname + "/app/Greeter.js", 'a':__dirname + &qu

Webpack入门教程二十

102.webpack.config.js文件中entry的三种使用方式一对象形式,修改webpack.config.js文件,内容如下 module.exports = { entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, output:{ path:'./dist/js', filename:'[name].js' } } 103.使用cnpm run webpack命令重新打包 104.查看dist/js目录生成的文

Webpack入门教程二十三

113.使用for循环输出HtmlWebpackPlugin中的内容,修改模板文件index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>webpack demo</title&

Webpack入门教程二十四

116.输出HtmlWebpackPlugin.files中的内容,修改模板文件index.html,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>webpack demo</ti

Webpack入门教程二十五

119.输出HtmlWebpackPlugin.options中的内容,修改模板文件index.html,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>webpack demo</

Webpack入门教程二十七

126.使用同一模板文件生成不同文件且标题不同,修改webpack.config.js文件,代码如下 var htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, output:{ path:'./dist', filename:'js/[name]-[hash].js', }

Webpack入门教程二十九

133.在模板中以内联的形式引用script脚本,修改webpack.config.js文件,代码如下 var htmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, output:{ path:'./dist', filename:'js/[name]-[hash].js',