webpack基本配置

 

# 前端构建工具Webpack的学习

 

## 什么是webpack？

 

> 百度词条：“Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。要使用Webpack 前须先安装Node.js。”

 

## webpack可以做什么？

 

1. 优化：删除多余的冗余代码，压缩；
2. 转换：jsx，es6，es6的语法转换，less，sass等预编译处理器的转换；
3. 打包：合并多余文件，减少请求次数，加快响应；
4. devServer代理解决跨域问题。
5. ......

 

## 目标

 

1. 通过webpack完成对公司现有项目从0开始的定制化搭建；
2. 摒弃现在脚手架中冗余的代码及配置；
3. 了解wbpack的一些原理，流程。

 

## 结构 
module.exports = {
    mode: "development", // 模式 =》 开发模式，生产模式
    entry: 'src/main.js', // 入口
    output: __dirname, // 输出
    module: {}, // 加载转换=》less || sass || 图片|| j'sx || es6 || es7
    plugins: [], // 插件
    devServer: {}, // 服务代理
    resolve: {}, // 特殊问题的解决方案
}
## 基本配置与命令行操作

 

### 命令行操作

 

安装：
npm i webpack webpack -cli -g

 

webpack：webpack的核心模块

 

webpack-cli：执行webpack相关的命令行
webpack -v 查看当前webpack的版本号
webpack --mode development/production 指定webpack的运行模式为开发模式/生产模式，默认是生产模式
webpack --config filename 指定webpack命令依赖的配置文件，默认是webpack.config.js文件
webpack src/main.js --output filename 指定输出文件为filename,默认输出文件为dist/main.js
###基本配置

 

1. 在项目根目录执行npm init -y生成package.json文件
2. 在scripts对象中添加命令
"scripts": {
    "build": "webpack src/main.js --mode development"
}
3. 执行npm run build命令时，就相当于执行了webpack src/main.js --mode development命令

 

## 属性详解

 

### entry
module.exports = {
    // 字符串：单个入口单个输出
    // 数组：多个入口单个输出
    // 对象：多个入口多个输出 对象的属性名one和two可通过name作为输出的文件的名字前缀
    entry: "src/one.js" || ["src/one.js","src/two.js"], {
        one: "src/one.js",
        two: "src/two.js"
    }，
    output: {
    filename: "[name].blund.js", // 这里的name就是entry为对象时的属性名
    },
}
### output
module.exports = {
    // 对象 {filename:'打包后文件的名字', path: '打包后文件的路径'}
    output: {
        filename: "[name].blund.js", // 这里的name就是entry为对象时的属性名。
        filename: "[hash].blund.js", // 这里的hash及时一个随机的一个哈希字符，确保打包后文件名字的唯一性
        path: __dirname + '/dist', //打包后就是在webpack当前目录下的dist下
    }
}
### plugins
webpack依赖于Node.js。因此引入依赖模块时需要使用node.js的模块导入
####clean-webpack-plugin
 
> 可以实现在打包时，清空原有的内容，该插件每次迭代使用方法差距较大需要关注官方文档
>
> 下载：npm i clean-webpack-plugin -D

 

####html-webpack-plugin

 

> 默认会在dist文件下生成一个html文件并引入打包好的js文件，详细功能见demo
>
> 下载：npm i html-webpack-plugin -D

 

#### extrace-text-webpack-plugin

 

> 拆分打包后的css文件到单独的css文件夹，而不是加载到HTML的style中
>
> 下载：npm i extract-text-webpack-plugin

 

### module

 

各个模块的加载转换预编译处理器=》css，es6抓换成es5等。

 

####css
// npm install style-loader css-loader -D
module: {
    rules: [
        {
        test: /.\.css$/, //医生的药房，道士的画符，程序员正则，天下三大奇闻。
        // npm install style-loader css-loader -D
        // loader: ["style-loader","css-loader"], //加载css然后将css放置到style标签中
        use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
        }) // 拆分打包后的css文件 需在插件中注册
    },
    ]
},
####less
// npm install style-loader css-loader less less-loader -D
module: {
    rules:[
        {
        // npm i less-loader less -D
        // 将less转换为css并加载转换后的css到style
        test: /.\.less$/,
        // loader: ["style-loader","css-loader","less-loader"],
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader","less-loader"]
        }) // 拆分打包后的css文件 需在插件中注册
    },
    ]
},
####sass
// npm install style-loader css-loader sass-loader node-sass -D
module: {
    rules: [
    {
    // npm i sass-loader node-sass -D
        test: /.\.scss$/,
    // loader: ["style-loader","css-loader","sass-loader"]
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader","sass-loader"]
        }) // 拆分打包后的css文件 需在插件中注册
    },
    ]
},
#### image

 

```js
// npm i url-loader file-loader -D
module: {
rules: [
{
// npm i url-loader file-loader -D
test: /.\.(jpg|jpeg|gif|svg)$/,
// loader: ["url-loader"],
use: [
{
loader: "url-loader",
query: {
limit: "1844560", // 指定图片的大小，当图片字节小于该值时，转换成base64,当图片字节小于该值时，需要安装file-loader
outputPath: "img", //指定图片放置的文件夹
}
}
]
},
]
},
```

 

#### jsx|es6|es7|es8|es9...

 

```js
// npm install babel-loader babel-core babel-preset-react babel-preset-env -D
module: {
rules: [
{
// npm install babel-loader babel-core babel-preset-react babel-preset-env
test: /.\.(js|jsx)/,
exclude: /node_modules/, // 排除指定的文件
loader: "babel-loader",
query: {
presets: [
"babel-preset-react",
"babel-preset-env"
]
}
}
]
},
resolve: {
extensions: [".js",".jsx"], //解决.jsx不识别的问题
},
```

 

注：

 

1. 之所以要配置这些东西，是为了支持在js中引入这些css/img静态资源文件，并将这些资源打包加载。
2. 需要注意的是loader:["stye-loader","css-loader"],这两个必须在开始且顺序不能乱，因为他的执行是从右开始执行，比如说less转换成css=》加载到style=》extract拆分到单独的路径。

 

### devServer

 

设置webpack的服务模块，可设置服务代理，解决跨域问题

 

```js
module.exports = {
devServer: {
open: true, // 是否在浏览器中自动打开
port: 8081, // 设置端口号
host: '127.0.0.1', // 设置访问地址
historyApiFallback: true, // 访问不存在的路由时进行重定向
proxy: {
// 反向代理
"/mock": { // 代理的前缀标识
target: "https://m.lagou.com", //请求的服务
changeOrigin: true,
pathRewrite: {
"^/mock": ""
}
}
}
},
}
```




##demo

 

```js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

 

module.exports = {
mode: "development", // 开发模式/生产模式 默认是生产
entry: "./src/main.js", // 对象(多入口多输出)，数组（多入口，单输出），字符串（单入口，单输出）
output: {
filename: "index.js",
path: __dirname + "/dist"
}
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "./public/index.html", // 指定模板地址 将模板复制一份放入dist文件，并引入打包后的js文件
filename: "index.html", // 打包后的文件的名字
inject: "body" || 'head' || true || false, // 打包后的html是否引入js文件，或引入js文件的位置, 默认为true
chunks: ["one","two"], // 多出口时 指定html引入哪些出口文件
excludeChunks: ["one","two"], // 多出口时，指定html过滤掉那些出口文件, 默认不设置时引入所有输出文件
title: "学习webpack", // 需要配合模板语法来使用 <%= htmlWebpackPlugin.options.title%>
minify: {
removeCommonts: true, // 清除注释
removeAttributeQuotes: true, // 移除双引号
removeEmptyElements: true, // 删除空元素
collapseWhitespace: true, // 进行折叠去除空格
//......
}, // 压缩的一些设置
}),
new ExtractTextPlugin("css/styles.css"), // 指定分离后的css文件路径 需要配合module下rules下ExtractTextPlugin.extract({})来使用
],
module: {
// 加载转换. css less sass 图片jsx react es6
rules: [
{
test: /.\.css$/, //医生的药房，道士的画符，程序员正则，天下三大奇闻。
// npm install style-loader css-loader -D
// loader: ["style-loader","css-loader"], //加载css然后将css放置到style标签中
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
// npm i less-loader less -D
// 将less转换为css并加载转换后的css到style
test: /.\.less$/,
// loader: ["style-loader","css-loader","less-loader"],
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader","less-loader"]
})
},
{
// npm i sass-loader node-sass -D
test: /.\.scss$/,
// loader: ["style-loader","css-loader","sass-loader"]
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader","sass-loader"]
})
},
{
// npm i url-loader file-loader -D
test: /.\.(jpg|jpeg|gif|svg)$/,
// loader: ["url-loader"],
use: [
{
loader: "url-loader",
query: {
limit: "1844560", // 指定图片的大小，当图片字节小于该值时，转换成base64,当图片字节小于该值时，需要安装file-loader
outputPath: "img", //指定图片放置的文件夹
}
}
]
},
{
// npm install babel-loader babel-core babel-preset-react babel-preset-env
test: /.\.(js|jsx)/,
exclude: /node_modules/, // 排除指定的文件
loader: "babel-loader",
query: {
presets: [
"babel-preset-react",
"babel-preset-env"
]
}
}
]
},
module: {
// 加载转换. css less sass 图片jsx react es6
rules: [
{
test: /.\.css$/, //医生的药房，道士的画符，程序员正则，天下三大奇闻。
// npm install style-loader css-loader -D
// loader: ["style-loader","css-loader"], //加载css然后将css放置到style标签中
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
// npm i less-loader less -D
// 将less转换为css并加载转换后的css到style
test: /.\.less$/,
// loader: ["style-loader","css-loader","less-loader"],
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader","less-loader"]
})
},
{
// npm i sass-loader node-sass -D
test: /.\.scss$/,
// loader: ["style-loader","css-loader","sass-loader"]
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader","sass-loader"]
})
},
{
// npm i url-loader file-loader -D
test: /.\.(jpg|jpeg|gif|svg)$/,
// loader: ["url-loader"],
use: [
{
loader: "url-loader",
query: {
limit: "1844560", // 指定图片的大小，当图片字节小于该值时，转换成base64,当图片字节小于该值时，需要安装file-loader
outputPath: "img", //指定图片放置的文件夹
}
}
]
},
{
// npm install babel-loader babel-core babel-preset-react babel-preset-env
test: /.\.(js|jsx)/,
exclude: /node_modules/, // 排除指定的文件
loader: "babel-loader",
query: {
presets: [
"babel-preset-react",
"babel-preset-env"
]
}
}
]
},
resolve: {
extensions: [".js",".jsx"], //解决.jsx不识别的问题
},
devServer: {
open: true, // 是否在浏览器中自动打开
port: 8081, // 设置端口号
host: '127.0.0.1', // 设置访问地址
historyApiFallback: true, // 访问不存在的路由时进行重定向
proxy: {
// 反向代理
"/mock": { // 代理的前缀标识
target: "https://m.lagou.com", //请求的服务
changeOrigin: true,
pathRewrite: {
"^/mock": ""
}
}
}
},
}
```







posted @ 2020-04-12 23:44  狗尾草的博客  阅读(359)  评论(0)  编辑  收藏  举报