webpack学习笔记一（入门）

Posted 2020-07-23 lmh2072005

webpack集成了模块加载和打包等功能 ，这两年在前端圈越来越手欢迎。平时一般是用requirejs、seajs作为模块加载用，用grunt/gulp作为前端构建。webpack作为模块化加载兼容了amd/cmd模式，并且作为模块化的资源可以是js/css/image  coffeescript/sass/less  ES2015 modles TypeScript 等功能非常强大，作为前端构建工具还可以和grunt/gulp配合一起使用。 配置文件webpack.config.js也是非常清晰。

一. 安装webpack 

npm install webpack -g 全局安装，这个时候可能会报错：npm warn optional dep failed...等错误， 可能是nodejs版本太低了 ，nodejs.org下载最新安装包即可 。

二. 命令行接口

1. 创建2个js文件

cats.js

var cats = [‘dave‘, ‘henry‘, ‘martha‘];
module.exports = cats;

app.js （主文件）

cats = require(‘./cats.js‘);
console.log(cats);

在命令行输出 ：

webpack ./app.js app.bundle.js

将会生成合并压缩后的 app.bundle.js文件 。 可以直接当做nodejs模块执行： node  app.bundle.js 看效果。

三. 使用配置文件

在项目根目录下 npm init 创建package.json文件 。这时会提示输入package相关信息。

npm install webpack --save-dev  下载webpack模块并且将webpack加入package开发依赖（这样其他合作开发者就可以直接npm install啦）。

在项目根目录新建webpack.config.js 里面就是webpack的相关配置信息了 。

const webpack = require(‘webpack‘);  //加载webpack模块
module.exports = {
    entry: ‘./src/app.js‘,  //主入口文件
    output: {
        path: ‘./bin‘,    //输出文件目录
        filename: ‘app.bundle.js‘   //输出文件名
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({  //使用uglifyjs插件
            compress: {
                warnings: false
            },
            output: {
                comments: false
            }
        })
    ]
};

webpack自带了uglifyjs插件以及js loader，所以不需要自己添加额外的插件。

进入到项目根目录在命令行直接运行webpack就行了。会看到在bin目录多了个app.bundle.js文件。

目录结构：

|--src

|--bin

|--node-modules

|--webpack.config.js

对于文件夹的命名，webpack官网是这样说的：

In the wild, there are many project structures. Some projects use app instead of src. Some projects use dist or build instead of bin. Projects with test usually use test, tests, spec, specs or colocate the test files in the source folder.

当需要加载其他特殊资源时需要下载相关的加载模块，比如：babel-loader 加载es2015 ( ECMAScript 6 简称ES6 , javascript语言的新标准。当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015 ) ,如果要兼容旧版浏览器还需要下载babel-polyfill, 这样就可以愉快的使用es6了。