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学习笔记【二】：打包样式资源
