webpack - SBaof/js-learn GitHub Wiki

安装

全局安装: npm install webpack -g

基本使用

查看帮助
```
webpack -h
```
命令行方式打包js/entry.js并生成bundle.js
```
webpack js/entry.js bundle.js
```

使用配置文件：webpack.config.js，在项目根目录创建文件 & 输入相关配置

module.exports = {
    devtool: "sourcemap",      // 方便排错 & 定位
    entry: "./js/entry.js",    // 待打包文件
    output: {
	    filename: "bundle.js"  // 输出文件
    }
};

当项目中配置好webpack.config.js文件之后，直接在项目根目录使用命令webpack即可

使用loader (anything to Js)

用途参考
- 其他语言编译到Js
- 对代码细节微调
- 校验 & 压缩
- 打包

示例：

使用style-loader & css-loader将样式文件编译到bundle.js中

# 安装css-loader style-loader

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

# 相关配置

module: {
    loaders: [
        {
            test: /\.css$/,             // test的值为正则表达式，当匹配符合是启用
            loader: "style!css"         // 指定使用的loader，多个loader使用`!`分割
            // loader: ['style', 'css'] // 使用数组指定需要的loader
        }
    ]
}

使用babel编译ES6

# 安装相关loader

npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime  --save-dev

# 相关配置

module: {
    loaders: [
        {
            test: /\.css$/,             // css文件编译相关配置
            loader: "style!css"
        },
        {
        	test: /\.js$/,              // 正则，同上
        	loader: "babel",            // 指定使用的loader
        	exclude: /node_modules/     // 指定忽略的文件，提高执行效率
        }
    ]
},
babel: {                                // babel相关配置
	presets: ['es2015', 'stage-0'],
	plugins: ['transform-runtime']
}

更多命令

webpack --display-modules

显示项目中使用的module

╭─[email protected] ~/iZone/fe/webpack ~^o^~👣
╰─➤  webpack --display-modules
Hash: b05fa6e69153193ee491
Version: webpack 1.14.0
Time: 2860ms
    Asset    Size  Chunks             Chunk Names
bundle.js  300 kB       0  [emitted]  main
bundle.js.map  380 kB       0  [emitted]  main
   [0] ./js/entry.js 95 bytes {0} [built]
   [1] ./js/module-one.js 893 bytes {0} [built]
   [2] ./~/babel-runtime/helpers/classCallCheck.js 208 bytes {0} [built]
   [3] ./~/babel-runtime/helpers/createClass.js 904 bytes {0} [built]
   [4] ./~/babel-runtime/core-js/object/define-property.js 103 bytes {0} [built]
   [5] ./~/core-js/library/fn/object/define-property.js 213 bytes {0} [built]
   [6] ./~/core-js/library/modules/es6.object.define-property.js 214 bytes {0} [built]
   [7] ./~/core-js/library/modules/_export.js 2.31 kB {0} [built]
   [8] ./~/core-js/library/modules/_global.js 322 bytes {0} [built]
   [9] ./~/core-js/library/modules/_core.js 117 bytes {0} [built]
  [10] ./~/core-js/library/modules/_ctx.js 505 bytes {0} [built]
  [11] ./~/core-js/library/modules/_a-function.js 120 bytes {0} [built]
  [12] ./~/core-js/library/modules/_hide.js 288 bytes {0} [built]
  [13] ./~/core-js/library/modules/_object-dp.js 608 bytes {0} [built]
  [14] ./~/core-js/library/modules/_an-object.js 149 bytes {0} [built]
  [15] ./~/core-js/library/modules/_is-object.js 107 bytes {0} [built]
  [16] ./~/core-js/library/modules/_ie8-dom-define.js 192 bytes {0} [built]
  [17] ./~/core-js/library/modules/_descriptors.js 177 bytes {0} [built]
  [18] ./~/core-js/library/modules/_fails.js 99 bytes {0} [built]
  ...

webpack --display-module --display-reasons

显示项目中使用的module，并且显示调用路径

╭─[email protected] ~/iZone/fe/webpack ~^o^~👣
╰─➤  webpack --display-modules --display-reasons
Hash: b05fa6e69153193ee491
Version: webpack 1.14.0
Time: 2219ms
    Asset      Size        Chunks            Chunk Names
  bundle.js    300 kB      0  [emitted]      main
bundle.js.map  380 kB      0  [emitted]      main
[0] ./js/entry.js 95 bytes {0} [built]
[1] ./js/module-one.js 893 bytes {0} [built]
    cjs require ./module-one [0] ./js/entry.js 3:0-23
[2] ./~/babel-runtime/helpers/classCallCheck.js 208 bytes {0} [built]
    cjs require babel-runtime/helpers/classCallCheck [1] ./js/module-one.js 3:23-70
[3] ./~/babel-runtime/helpers/createClass.js 904 bytes {0} [built]
    cjs require babel-runtime/helpers/createClass [1] ./js/module-one.js 7:20-64
[4] ./~/babel-runtime/core-js/object/define-property.js 103 bytes {0} [built]
    cjs require ../core-js/object/define-property [3] ./~/babel-runtime/helpers/createClass.js 5:22-66
[5] ./~/core-js/library/fn/object/define-property.js 213 bytes {0} [built]
    cjs require core-js/library/fn/object/define-property [4] ./~/babel-runtime/core-js/object/define-property.js 1:30-82
[6] ./~/core-js/library/modules/es6.object.define-property.js 214 bytes {0} [built]
    cjs require ../../modules/es6.object.define-property [5] ./~/core-js/library/fn/object/define-property.js 1:0-51
[7] ./~/core-js/library/modules/_export.js 2.31 kB {0} [built]
    cjs require ./_export [6] ./~/core-js/library/modules/es6.object.define-property.js 1:14-34
[8] ./~/core-js/library/modules/_global.js 322 bytes {0} [built]
    cjs require ./_global [7] ./~/core-js/library/modules/_export.js 1:16-36
    cjs require ./_global [19] ./~/core-js/library/modules/_dom-create.js 2:15-35
[9] ./~/core-js/library/modules/_core.js 117 bytes {0} [built]
    cjs require ../../modules/_core [5] ./~/core-js/library/fn/object/define-property.js 2:14-44
    cjs require ./_core [7] ./~/core-js/library/modules/_export.js 2:16-34
[10] ./~/core-js/library/modules/_ctx.js 505 bytes {0} [built]
    cjs require ./_ctx [7] ./~/core-js/library/modules/_export.js 3:16-33
...

webpack -p || webpack --optimize-minimize

代码压缩优化
webpack -w || webpack --watch

监控文件的变化 && 自动执行webpack命令
webpack-dev-server --inline --hot

webpack热加载：监控项目文件变化 & 自动执行webpack命令 & 自动刷新页面默认启动服务器：http://localhost:8080
- 遇到的问题：
```
ERROR in multi main
Module not found: Error: Cannot resolve module 'webpack/hot/dev-server' in /Users/bjhl/iZone/fe/webpack
 @ multi main
```
- 解决方案：
  初学webpack遇到的坑
   Can't get webpack hot module replacement to work

使用`Plugins`

提供更多loader不具备的功能

# 相关配置

plugins: [
	new webpack.BannerPlugin('This file is created by Bao'),
	new webpack.optimize.DedupePlugin(),
	new webpack.optimize.UglifyJsPlugin({mangle: false, sourcemap: false})
]

Plugins

使用`NODE_DEV`配置，区分不同运行环境

# 相关配置

# `webpack.config.js`文件开头添加
var debug = process.env.NODE_ENV !== 'production';

# 使用线上环境不需要使用`sourcemap`，则：
devtool: debug ? "sourcemap" : null

两个`webpack`项目分析工具

使用`webpack`进行`VUE`组件开发

安装VUE相关loaders & packages

npm install vue vue-loader vue-html-loader vue-style-loader --save-dev

在文件webpack.config.js中添加相关配置

module: {
    loaders: [
        {
        	test: /\.vue$/,
        	loader: "vue"
        }
    ]
},

创建相关文件

js/components/foo.vue: vue模板文件

<template>
    <div>
	    <h3>{{ message }}</h3>
    </div>
</template>

<script>
    export default {
	    data () {
		    return {
			    message: "If I rest,I rust!"
		    }
	    }
    }
</script>

编辑entry.js

import Vue from 'vue';
import Foo from './components/foo.vue';

new Vue({
    el: '#app',
    components: {
	    Foo
    }
})

编辑index.html

<div id="app">
    <Foo></Foo>
</div>

遇到的问题 * [Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)
解决方案：Standalone vs. Runtime-only Build

webpack - SBaof/js-learn GitHub Wiki

安装

基本使用

使用loader (anything to Js)

更多命令

使用`Plugins`

使用`NODE_DEV`配置，区分不同运行环境

两个`webpack`项目分析工具

使用`webpack`进行`VUE`组件开发

Webpack相关参考

⚠️ GitHub.com Fallback ⚠️

webpack - SBaof/js-learn GitHub Wiki

安装

基本使用

使用loader (anything to Js)

更多命令

使用Plugins

使用NODE_DEV配置，区分不同运行环境

两个webpack项目分析工具

使用webpack进行VUE组件开发

Webpack相关参考

⚠️ **GitHub.com Fallback** ⚠️

使用`Plugins`

使用`NODE_DEV`配置，区分不同运行环境

两个`webpack`项目分析工具

使用`webpack`进行`VUE`组件开发

⚠️ GitHub.com Fallback ⚠️