# webpack
**Repository Path**: dc_teach/webpack
## Basic Information
- **Project Name**: webpack
- **Description**: webpackdemo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-03-15
- **Last Updated**: 2022-05-25
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
#### 目录
1. 安装
1. nodejs模块系统
1. 入口和出口
1. loader 加载器
1. plugin 插件
1. dev-server
>#### 安装
1. 初始化package.json,新建一个空文件夹(比如webpack-demo,下称项目根目录),使用命令行进入,运行下面命令
```
npm init
```
一路回车,最后文件夹里会多出一个package.json的文件
2. 全局安装webpack
```
npm i webpack -g
```
3. 安装webpack-cli
```
npm i webpack-cli -g
```
>#### nodejs的模块系统
* 用module.exports 导出模块
```
const dog = {
name: '金毛',
color: '金色'
}
module.exports = dog;
```
* 用require导入模块
```
// 加载m1.js
const obj = require('./m1');
console.log(obj.name); // 金毛
```
>#### 入口和出口配置
在项目根目录新建webpack.config.js(必须叫这名),填写以下内容
```
/**
* demo1
* 入口和出口
*/
// path是nodejs的路径处理插件
const path = require('path');
module.exports = {
// 模式 production-生产环境 development-开发环境
mode: 'development',
// 入口
entry: './main.js',
// 出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main-webpack.js'
}
};
```
>#### loader配置
在webpack眼里,一切皆模块,js、css、img、txt、vue等统统都是模块，但webpack默认只认识js模块，其它文件都需要配置相应的加载器（loader）才能正确的识别，比如css要配css-loader，vue要配vue-loader
1. 配置css-loader
* npm init 初始化package.json
* npm i style-loader --save-dev 安装style-loader
* npm i css-loader --save-dev 安装css-loader
* 配置webpack.config.js
```
var path = require('path');
module.exports = {
mode: 'development',
entry: './main.js',
output: {
filename: 'main-webpack.js',
path: path.resolve(__dirname,'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
```
* 创建main.js
```
require('./style.css');
console.log('在这里做的别的事情')
```
* 创建style.css
```
body {
background: gray;
}
```
* 运行打包命令 webpack
* 检验: 在dist(打包后生成的文件夹)文件夹内新建index.html,导入main-webpack.js,然后打开,看网页的背景颜色是否为灰色
2. 配置less-loader
* 安装less 和 less-loader
```
npm install --save-dev less-loader less style-loader css-loader
```
* webpack配置
```
// path是nodejs的路径处理插件
const path = require('path');
module.exports = {
// 模式 production-生产环境 development-开发环境
mode: 'development',
// 入口
entry: './main.js',
// 出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main-webpack.js'
},
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}]
}
};
```
* 新建main.js和app.less
```
require('./app.less');
console.log('在这里做的别的事情')
```
```
div {
h3 {
color: red;
font-size: 30px
}
}
```
* 检验: 在dist文件夹新建index.html,打开看看h3是否变了颜色
```
Document
这是h3
```