webpack入门记录

时间 2019-11-18

标签 webpack 入门记录繁體版

原文原文链接

webpack是当下最热门的前端资源模块化打包工具，经过 loader 方式，号称任何资源均可以打包。它在编译的时候就直接将模块整理打包、压缩，而不像sea.js和require.js须要在页面中引用额外的文件管理，固然，各有不一样。javascript

安装

若是你尚未安装node.js的话，首先安装 node.js；
使用npm安装webpack，或者使用cnpm速度更快。css

npm install webpack -g

使用 -g 将webpack安装到全局环境下，安装完运行 webpack -h 命令试试。html

通常会将webpack安装项目依赖中，这样就可使用项目本地的webpack，听说效率会高一点；
先使用npm init建立建立package.json文件。前端

Package.json 属性说明
- name   包名。
- version  包的版本号。
- description  包的描述。
- homepage  包的官网 url 。
- author  包的做者姓名。
- contributors  包的其余贡献者姓名。
- dependencies  依赖包列表。若是依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
- repository  包代码存放的地方的类型，能够是 git 或 svn，git 可在 Github 上。
- main  一个模块ID，它是一个指向你程序的主要项目。就是说，若是你包的名字叫 express，而后用户安装它，而后require("express")。
- keywords - 关键字

将webpack写入项目依赖中：java

cnpm install webpack --save-dev

若是须要使用 Webpack 开发工具，要单独安装：node

cnpm install webpack-dev-server --save-dev

如何使用

项目首页index.html，入口文件entry.js：webpack

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>webpack</title>
    <link rel="stylesheet" href="dist/css/style.css">
</head>
<body>
    <h1>webpack</h1>
    <script src="dist/js/entry.js"></script>
</body>
</html>

entry.js：git

document.write('hi webpack.');

执行命令将src/js/entry.js打包到dist/js/entry.js：github

webpack src/js/entry.js dist/js/entry.js

正常执行后会输出下面的日志：web

Hash: 1931694bece61d881e02
Version: webpack 1.14.0
Time: 37ms
   Asset     Size  Chunks             Chunk Names
entry.js  1.42 kB       0  [emitted]  main
   [0] ./src/js/entry.js 30 bytes {0} [built]

打包后的dist/js/entry.js内容(没压缩的状况)：

一个简单基础的打包流程实现了，但其实webpack远不止这么简单，它很是强大，咱们能够把一些功能写入到配置文件中，在项目的根目录下面建立一个webpack.config.js

var webpack = require('webpack');

module.exports = {
    entry: './src/js/entry.js',  // 入口文件
    output: {                    // 输出文件
        path: __dirname + '/dist/js/',
        filename: 'entry.js'
    }
};

而后再项目根目录运行webpack命令，会自动执行webpack.config.js里面的配置；
能够输入webpack --watch命令运行，会自动监听文件内容变化，自动打包；
若是开发环境和线上环境的配置有不同的地方，也能够配置多个webpack.config.js文件，运行命令的时候经过webpack --config webpack-dev.config.js执行不一样的配置；
还有很重要的一点，代码都打包了，咱们调试代码是很不方便的，因此能够在开发环境的配置文件里面增长devtool: 'inline-source-map'：

var webpack = require('webpack');

module.exports = {
    entry: './src/js/entry.js',  // 入口文件
    output: {                    // 输出文件
        path: __dirname + '/dist/js/',
        filename: 'entry.js'
    },
    devtool: 'inline-source-map'  //生成 sourcemap
};

更多配置，去查看官方的介绍吧。http://webpack.github.io/docs/configuration.html