webpack基础

在去阅读webpack官网文档过程中，loader部分开头就介绍到webpack自带处理js，json的功能，所以想处理其他类型的文件如 css, less, sass, png, gif, jpg等需要让loader将其转换为有效模块，以供应用程序去使用，我们可以验证一下webpack能否打包js，json，css文件

验证webpack 打包js代码

1. 初始化package.json

npm init

回车默认package.json的配置

2. 全局安装webpack webpack-cli

  yarn add webpack webpack-cli global

3. 同时在本地项目中安装

  yarn add webpack webpack-cli -D

4. 新建代码部分的目录

 mkdir src && touch ./src/indexjs

index.js为本次webpack打包js代码的入口文件
可以输入一些js代码内容如下：

function printNum() {
    console.log(1);
}
pintNum();

5. 新建输入部分的目录

mkdir dist

通过webpack 打包以后输出的文件放在dist目录文件下

6. 进行webpack打包测试

在该项目的根目录下运行, src中的index.js为入口文件进行打包，打包的输出文件在dist文件夹下为main.js，打包环境为

npx webpack ./src/index.js -o ./dist --mode=development

或者在package.json中配置命令行

{
    "scripts": {
        "build:dev": "webpack ./src/index.js -o ./dist --mode=development"
    },
}

保存后再运行

  yarn build:dev

或

npm build:dev

可以看到，在src/index.js中的方法代码是可以被打包的。

验证webpack打包json代码

在src下新建json文件

touch data.json

内容为：

{
    "name": "利鲁姆"
}

在index.js中引用

import data from './data.json';

console.log(data);

可以换个方式去打包代码，在根目录下新建一个文件webpack.config.js

touch webpack.config.js

内容为

const { join } = require('path');

module.exports = {
    entry: './src/index.js', // 入口文件
    output: {
        filename: 'index.js', // 输出文件名
        path: join(__dirname, 'dist'), // 输出文件的路径
    },
    mode: "development", // 当前打包环境为development

执行命令

npm webpack --config webpack.config.js

或将package.json中的命令行配置修改一下：

{
    "scripts": {
        "build:dev": "webpack --config webpack.config.js"
    },
}

可以看到能够打包成功

验证能否打包css代码

在src下新建css文件

touch index.css

内容为：

html, body {
    background-color: '#abcdef'
}

在index.js中引入这个css文件

import './index.css';

执行打包命令

npm run build:dev

可以看到webpack打包失败，并提示我们需要下来loader去处理， 可以去看loader部分的笔记，如何使用loader处理除js，json以外其他的文件。

如何打包 css 和 less 文件请参考 webpack学习笔记【二】：打包样式资源