webpack学习一

webpack v4.x.x

一、安装

新建一个项目webpack_day1,先初始化：

npm init -y

这样项目下就多了一个package.json文件

{
  "name": "webpack_day1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

然后执行以下命令局部安装webpack

npm i webpack webpack-cli -D

不建议全局安装，因为全局安装会把所有项目指定到指定的版本，这样可能造成一些问题。
安装完成之后，你想看看webpack的版本，如果你执行以下命令

webpack -v

会报错，这种只适用于webpack的全局安装。应该用如下命令：

npx webpack -v

二、运行

在webpack_day1项目下新建src目录，再新建一个index.js文件，内容如下：

console.log('hello webpack');

在命令行执行

npx webpack

现在项目下多了一个dist目录，里面有一个main.js文件，内容如下：

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("hello webpack")}]);

或者有另外一种运行方式
修改package.json中的配置

"scripts": {
    "test": "webpack"
  },

命令行执行

npm run test

也会打包出一个dist目录中的main.js

三、js引入页面

在dist目录下创建一个index.html，通过script标签引入main.js，在浏览器打开index.html，发现控制台打印出了“hello webpack”。
以上都还只是用到了webpack的默认配置

webpack默认配置

• 默认入口模块 /src/index.js
• 默认输出
  • /dist
  • /dist/main.js
• webpack默认支持多种模块类型，如CommonJS、ESmodule、AMD
• webpack默认支持js模块和json模块

在src目录下新建index.json

{
    "name": "test"
}

在src目录下新建other.js

export function add(a, b){
    return a + b;
}

修改index.js

import {add} from './other.js';
const json = require('./index.json');

console.log(add(1, 2), json);

打包运行，在浏览器查看，有正常运行并打印结果到控制台

那么，非js或json的文件导入会怎么样呢？
在index.js中新增一句

import('./logo.png');

运行，报错，提示需要配置一个相应的loader

四、配置

在项目根目录下新建一个默认的配置文件webpack.config.js。
因为webpack是基于nodejs的，所以导出对象要用CommonJS规范
以下都是默认配置

const path = require('path');

module.exports = {
    entry: './src/index.js', // webpack执行入口
    output: {
        path: path.resolve(__dirname, './dist'), // 输出到哪里，必须是绝对路径
        filename: 'main.js'
    }
};

运行提示没有配置mode，加上

const path = require('path');

module.exports = {
    entry: './src/index.js', // webpack执行入口
    output: {
        path: path.resolve(__dirname, './dist'), // 输出到哪里，必须是绝对路径
        filename: 'main.js'
    },
    mode: 'development'
};

再运行，这时候生成的main.js就不是压缩的了，因为是开发模式。
为什么生成的main.js文件内容远多于我们自己写的呢？
这里面主要加了启动器自执行函数，参数是入口及其依赖的所有模块。

所以，webpack不适合用于JS库的构建，因为不够纯粹！