webpack学习笔记基础篇

webpack 是一个模块打包工具，你可以使用 webpack 管理你的模块依赖，并编译输出模块们所需的静态文件。他可以很好地管理、打包 web 开发中所用的 HTML、JavaScript、CSS 以及各种静态文件(图片、字体等)，让开发过程更加高效。对于不同类型的资源，webpack 有对应的模块加载器。webpack 模块打包回分析模块间的依赖关系，最后生成优化且合并后的静态资源。

webpack的两大特色：

1、code splitting (自动完成)
2、loader 可以处理各种类型的静态资源，并且支持串联操作

webpack 是以 CommonJS 的形式来书写脚本的，但是对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。webpack 具有 requireJs 和 browserify 的功能，但仍有自己很多的新特性。对 CommonJS、AMD、ES6 的语法做了兼容，对 JavaScript、CSS、图片等资源都支持打包。webpack 有独立的配置文件 webpack.config.js

安装webpack

首先你的电脑里已经安装了npm

npm init -y //初始化
npm i webpack -D
// 或者
npm i webpack --save-dev

这里就按照好了webpack，下面来写第一个例子

目录结构

其中index.html

app/index.js

import join from 'lodash/join'
function component () {
    var element = document.createElement("div");
    element.innerHTML = join(["hello", "webpack"], " ");
    return element;
}
document.body.appendChild(component())

文件已经准备就绪，下面开始运行webpack

./node_modules/.bin/webpack ./app/index --output-filename dist/bundle.js

此处有一个坑，windows电脑正确写法应该是

.\node_modules\.bin\webpack .\app\index --output-filename dist\bundle.js

执行成功之后会生成 dist/bundle.js 这个文件目录，在浏览器里打开 index.html 文件，会发现输出 hello webpack，至此，一个简单的例子就完成了。
在 demo 下新建 webpacl 配置文件 webpack.config.js

module.exports = {
    entry: {
        bundle: './app/index.js'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist/'
    }
}

然后执行下面的代码也可以正常输出

.\node_modules\.bin\webpack

修改 package.json 文件

package.json

执行下面的快捷键会有同样的效果

npm run build

如果需要打包多个文件，比如有index.js、index2.js，两种方法：
1、修改 webpack.config.js 文件

entry: {
        bundle: ['./app/index.js', 'index2.js']
}

2、新建一个main.js 文件

import './index.js'
import './index2.js'

只需要打包这个main.js 这个文件就行

entry: {
        bundle: './app/main.js'
}

打包图片资源

新建 index2.js 文件

import join from 'lodash/join'
function component () {
    var element = document.createElement("div");
    element.innerHTML = join(["hello", "Vue"], " ") + '';
    return element;
}
document.body.appendChild(component())

此处还需要下载两个 loader ： url-loader 和 file-loader

npm i -D url-loader file-loader

修改 webpack.config.js 文件

let webpack = require('webpack')
module.exports = {
    entry: {
        bundle: './app/main.js',
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist/',
        publicPath: 'dist/'         // 资源访问路劲
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg)$/,    //正则匹配文件后缀名
                loader: 'url-loader',
                options: {
                    limit: 100,    // 最大文件，单位是 KB
                    name: 'img/[name].[hash:7].[ext]'    //当文件大于100KB的时候，把文件放到img文件夹下，文件名是：原名字+随机输出的7位hash值+原扩展名；当文件小于100KB的时候，在生成的bundle.js文件里会发现图片是base64码
                }
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin()    // 对js 进行压缩
    ]
}