Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/layouwen/webpack
webpack配置文件
https://github.com/layouwen/webpack
Last synced: 2 days ago
JSON representation
webpack配置文件
- Host: GitHub
- URL: https://github.com/layouwen/webpack
- Owner: Layouwen
- Created: 2020-06-20T06:42:39.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T09:23:56.000Z (almost 2 years ago)
- Last Synced: 2023-03-04T11:34:01.282Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://layouwen.github.io/webpack/index.html
- Size: 469 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# webpack - study
## 一、使用方法
开发
```bash
yarn start
```
发布
```bash
yarn build
```
## 二、初始配置
### 初始化
```bash
npm init -y
```
```bash
yarn add webpack webpack-cli --dev
```
查看版本
```bash
./node_modules/.bin/webpack --version
或
npx webpack --version
```
### 设置模式
创建webpack.config.js文件，选择模式
- development 开发模式
- production 发布模式
```js
module.exports = {
mode: '模式'
}
```
### 打包
```bash
./node_modules/.bin/webpack
或
npx webpack
```
### 设置目标文件(webpack.config)
- 进入位置
entry: '路径'
- 输出位置
默认dist
- 输出名
filename: '名字'
> 设置打包hash
> filename: '[name].[contenthash].js'
### 设置build(package)
```js
"scripts":{
"build": "rm -rf dist && npx webpack"
}
```
使用
```bash
npm run build
或
yarn build
```
### 安装html-webpack-plugin
```bash
yarn add html-webpack-plugin --dev
```
设置模板(webpack.config)
```js
var HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [new HtmlWebpackPlugin({
title: 'test - 首页',
template: 'src/assets/index.html'
})]
```
在模板那设置同步title
```html
<%= htmlWebpackPlugin.options.title %>
```
### 引入css文件
```bash
yarn add css-loader --dev
yarn add style-loader --dev
yarn add mini-css-extract-plugin
```
设置配置文件(webpack.config)
方法1：
```js
module: {
rules: [{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
}]
}
```
方法2：
```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
plugins: {
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[id].[contenthash].css',
ignoreOrder: false,
})
}
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../',
hmr: process.env.NODE_ENV === 'development',
}
},
'css-loader',
]
```
### 安装webpack-dev-server
```bash
yarn add webpack-dev-server --dev
```
配置文件(webpack.config)
```js
devServer: {
contentBase: './dist',
},
```
配置package
```json
"scripts": {
"start": "webpack-dev-server",
},
```
### 引入SCSS
```bash
yarn add sass-loader dart-sass --dev
```
设置配置文件(webpack.config)
```js
module: {
rules: [{
test: /\.scss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('dart-sass')
}
}
]
}, ]
}
```
### 引入Less
```bash
yarn add less --dev
yarn add less-loader --dev
```
设置配置文件(webpack.config)
```js
rules: {
test: /\.less$/,
loader: ['style-loader', 'css-loader', 'less-loader']
},
```
### 引入Stylus
```bash
yarn add stylus stylus-loader --dev
```
设置配置文件(webpack.config)
```js
rules: {
test: /\.styl$/,
loader: ['style-loader', 'css-loader', 'stylus-loader']
},
```
### 引入image
```bash
yarn add file-loader --dev
```
设置配置文件(webpack.config)
```js
rules: {
test: /\.(png|svg|jpg|gif)$/,
use: 'file-loader'
},
```
### 懒加载
lazy.js
```js
export default function lazy() {
console.log('我是懒加载函数')
}
```
```js
const promise = import('./lazy.js')
promise.then((module) => {
module.default()
}, () => {
console.log('加载失败')
})
```
### 一件部署脚本
```bash
sh deploy.sh
```