webpack配置以及下载模块

最新推荐文章于 2024-05-15 15:52:50 发布

Raken12

最新推荐文章于 2024-05-15 15:52:50 发布

阅读量552

点赞数

分类专栏：前端文章标签： websocket

本文链接：https://blog.csdn.net/Raken12/article/details/108246702

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

下载

yarn add webpack webpack-cli --dev

参考版本：yarn add webpack@4.41.5 webpack-cli@3.3.10 --dev

实现步骤：

a安装webpack

yarn add webpack@4.41.5 webpack-cli@3.3.10 --dev

b 修改package.json文件中的scripts键

“build”: “webpack --mode=production”

c 创建src\index.js

console.log(‘hello，webopenfather’)

d 测试打包

yarn build

■webpack配置 ( webpack.config.js

默认入口（entry）：src/index.js

默认出口（output）：dist/main.js

疑惑：如果想自定义呢？

解决：在项目根目录声明webpack.config.js

2、指定入口&出口

查看手册

练习

a 练习：将src/index.js改为src/qf.js -> 重新build 发现报错因为入口文件不存在 index.js

b 解决：在项目根目录下创建webpack.config.js文件，重写默认入口文件

c 自定义输出打包文件名

// 导入模块
const path = require('path')

// 导出配置
module.exports = {
    // 指定入口文件
    // entry: './src/index.js',  默认
    entry: './src/qf.js',//      指定

    // 指定出口文件
    output: {
        // 说明：path.resolve 这是使用node中path模块的方法
        // 作用：目录分隔符  linux/mac系统  / 斜杠  win系统 \ 反斜杠
        // 说明：__dirname这是node中的变量  值是动态变化
        // 作用：获取当前文件所在目录路径  webpack.config.js
        // 含义：当前文件所在目录/dist
        path: path.resolve(__dirname, 'dist'),
        filename: 'qf.js'
    }
};

3、多入口&出口

需求：创建home.js和about.js打包

代码：如下

// 导入模块
const path = require('path')

// 导出配置
module.exports = {
    // 指定入口文件
    // entry: './src/index.js',  默认
    // entry: './src/qf.js',//   指定
    entry: {
        qf: './src/qf.js',
        home: './src/home.js',
        about: './src/about.js'
    },

    // 指定出口文件
    output: {
        // 说明：path.resolve 这是使用node中path模块的方法
        // 作用：目录分隔符  linux/mac系统  / 斜杠  win系统 \ 反斜杠
        // 说明：__dirname这是node中的变量  值是动态变化
        // 作用：获取当前文件所在目录路径  webpack.config.js
        // 含义：当前文件所在目录/dist
        path: path.resolve(__dirname, 'dist'),

        // 默认HTTP请求状态码：200  有请求 、有响应数据
        // 然后浏览器都有缓存机制：304 有请求、有响应【没】有数据  数据来源于浏览器缓存
        // 如果你看过我之前在课件中发的nginx里面有一个词：expires 、gzip  直接不发送请求
        // 缓存机制：文件名  用户第1次访问后根据文件名缓存，第2次就不发送请求
        // 问题：每次项目build上线文件名都一样
        // 你跟新、但是文件名都一样用户还是用的以前的js、css新功能没办法实现.
        // 解决：每次build之后都会产生一个新的文件名
        // filename: 'qf.js'                 // 单个
        // filename: '[name].js'             // 多个 
        // filename: '[name].[hash].js'      // 避免缓存 
        // filename: '[name].[hash:7].js'    // 截取指定 
        filename: '[name].[chunkhash:7].js'  // 内容hash 
        
        // 区别：hash每次都会有一个唯一的标识 只要内容变了 全部重新生成
        //      chunkhash基于每个文件的内容 修改了 只会这个文件重新生成
    }
};

4、配置文件位置

默认：打包去项目根目录下找webpack.config.js配置文件

需求：创建scripts目录，将webpack.config.js放进去

发现：更改配置文件路径报错，

解决：声明配置文件所在目录

实现：

a. 创建scripts目录，将webpack.config.js放进去

b. 修改package.json声明配置文件路径

c. 修改webpack.config.js存在BUG

■插件配置

3、练习

步骤1：安装

yarn add --dev html-webpack-plugin

步骤2：创建public目录\index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <!-- <title>自己造React脚手架</title> -->
 <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
 <div id="root"></div>
</body>
</html>

步骤3：根据手册修改webpack.config.js文件

// 导入模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 导出配置
module.exports = {
 // 指定入口文件
 // entry: './src/index.js',  默认
 // entry: './src/qf.js',//   指定
 entry: {
     qf: './src/qf.js',
     home: './src/home.js',
     about: './src/about.js'
 },

 // 指定出口文件
 output: {
     // 说明：path.resolve 这是使用node中path模块的方法
     // 作用：目录分隔符  linux/mac系统  / 斜杠  win系统 \ 反斜杠
     // 说明：__dirname这是node中的变量  值是动态变化
     // 作用：获取当前文件所在目录路径  webpack.config.js
     // 含义：当前文件所在目录/dist
     // path: path.resolve(__dirname, 'dist'),

     // 说明：process是node进程模块、全局变量不需要引入直接使用
     // 语法：process.cwd() 获取当前DOS窗口指定命令路径
     // 咱们：一般都是在项目根目录下执行
     path: path.resolve(process.cwd(), 'dist'),

     // 默认HTTP请求状态码：200  有请求 、有响应数据
     // 然后浏览器都有缓存机制：304 有请求、有响应【没】有数据  数据来源于浏览器缓存
     // 如果你看过我之前在课件中发的nginx里面有一个词：expires 、gzip  直接不发送请求
     // 缓存机制：文件名  用户第1次访问后根据文件名缓存，第2次就不发送请求
     // 问题：每次项目build上线文件名都一样
     // 你跟新、但是文件名都一样用户还是用的以前的js、css新功能没办法实现.
     // 解决：每次build之后都会产生一个新的文件名
     // filename: 'qf.js'                 // 单个
     // filename: '[name].js'             // 多个 
     // filename: '[name].[hash].js'      // 避免缓存 
     // filename: '[name].[hash:7].js'    // 截取指定 
     filename: '[name].[chunkhash:7].js'  // 内容hash 
     
     // 区别：hash每次都会有一个唯一的标识 只要内容变了 全部重新生成
     //      chunkhash基于每个文件的内容 修改了 只会这个文件重新生成
 },
 plugins: [
     //说明：功能让webpack变得更强
     //作用：给public/index.js自动引入打包后的js等文件
     //new HtmlWebpackPlugin()
     new HtmlWebpackPlugin({
         // 自定义变量
         title: "神龙教主WEBPACK脚手架",
         desc: "神龙教主、洪福齐天、寿与天齐",
         // 输出到dist下面的名称、默认index.html
         filename: 'index.html',
         // 模板文件
         template: 'public/index.html'
     })
 ]
};

步骤4：测试重新build

■loaders 配置（css-loader）

1、明确需求

说明：在写项目时，我们需要在js中导入css 可是默认js又不支持css语法

回答：通过css-loader模块

2、练习

发现问题

步骤1：创建qf.css文件
html,body{background:red;}
步骤2：在qf.js中引入qf.css
import './qf.css'

console.log('hello,webopenfather')
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uBcD5qs2-1598448775356)(images/1588822532944.png)]

解决问题

https://www.npmjs.com/package/css-loader

步骤1：安装模块

yarn add --dev style-loader css-loader

步骤2：根据手册修改配置文件

// 导入模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 导出配置
module.exports = {
// 指定入口文件
// entry: './src/index.js',  默认
// entry: './src/qf.js',//   指定
entry: {
  qf: './src/qf.js',
  home: './src/home.js',
  about: './src/about.js'
},

// 指定出口文件
output: {
  // 说明：path.resolve 这是使用node中path模块的方法
  // 作用：目录分隔符  linux/mac系统  / 斜杠  win系统 \ 反斜杠
  // 说明：__dirname这是node中的变量  值是动态变化
  // 作用：获取当前文件所在目录路径  webpack.config.js
  // 含义：当前文件所在目录/dist
  // path: path.resolve(__dirname, 'dist'),

  // 说明：process是node进程模块、全局变量不需要引入直接使用
  // 语法：process.cwd() 获取当前DOS窗口指定命令路径
  // 咱们：一般都是在项目根目录下执行
  path: path.resolve(process.cwd(), 'dist'),

  // 默认HTTP请求状态码：200  有请求 、有响应数据
  // 然后浏览器都有缓存机制：304 有请求、有响应【没】有数据  数据来源于浏览器缓存
  // 如果你看过我之前在课件中发的nginx里面有一个词：expires 、gzip  直接不发送请求
  // 缓存机制：文件名  用户第1次访问后根据文件名缓存，第2次就不发送请求
  // 问题：每次项目build上线文件名都一样
  // 你跟新、但是文件名都一样用户还是用的以前的js、css新功能没办法实现.
  // 解决：每次build之后都会产生一个新的文件名
  // filename: 'qf.js'                 // 单个
  // filename: '[name].js'             // 多个 
  // filename: '[name].[hash].js'      // 避免缓存 
  // filename: '[name].[hash:7].js'    // 截取指定 
  filename: '[name].[chunkhash:7].js'  // 内容hash 
  
  // 区别：hash每次都会有一个唯一的标识 只要内容变了 全部重新生成
  //      chunkhash基于每个文件的内容 修改了 只会这个文件重新生成
},
module: {
  rules: [
      {
          test: /\.css$/i,
          use: ['style-loader', 'css-loader'],
      },
  ],
},
plugins: [
  //说明：功能让webpack变得更强
  //作用：给public/index.js自动引入打包后的js等文件
  //new HtmlWebpackPlugin()
  new HtmlWebpackPlugin({
      // 自定义变量
      title: "cyy的脚手架",
      desc: "vixx",
      // 输出到dist下面的名称、默认index.html
      filename: 'index.html',
      // 模板文件
      template: 'public/index.html'
  })
]
};

3、使用mini-css-extract-plugin优化

发现：css没有单独打包，引入

解决：通过第三方插件mini-css-extract-plugin

代码：https://www.npmjs.com/package/mini-css-extract-plugin

步骤1：安装模块

yarn add mini-css-extract-plugin --dev

步骤2：修改webpack.config.js

// 导入模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 导出配置
module.exports = {
    // 指定入口文件
    // entry: './src/index.js',  默认
    // entry: './src/qf.js',//   指定
    entry: {
        qf: './src/qf.js',
        home: './src/home.js',
        about: './src/about.js'
    },

    // 指定出口文件
    output: {
        // 说明：path.resolve 这是使用node中path模块的方法
        // 作用：目录分隔符  linux/mac系统  / 斜杠  win系统 \ 反斜杠
        // 说明：__dirname这是node中的变量  值是动态变化
        // 作用：获取当前文件所在目录路径  webpack.config.js
        // 含义：当前文件所在目录/dist
        // path: path.resolve(__dirname, 'dist'),

        // 说明：process是node进程模块、全局变量不需要引入直接使用
        // 语法：process.cwd() 获取当前DOS窗口指定命令路径
        // 咱们：一般都是在项目根目录下执行
        path: path.resolve(process.cwd(), 'dist'),

        // 默认HTTP请求状态码：200  有请求 、有响应数据
        // 然后浏览器都有缓存机制：304 有请求、有响应【没】有数据  数据来源于浏览器缓存
        // 如果你看过我之前在课件中发的nginx里面有一个词：expires 、gzip  直接不发送请求
        // 缓存机制：文件名  用户第1次访问后根据文件名缓存，第2次就不发送请求
        // 问题：每次项目build上线文件名都一样
        // 你跟新、但是文件名都一样用户还是用的以前的js、css新功能没办法实现.
        // 解决：每次build之后都会产生一个新的文件名
        // filename: 'qf.js'                 // 单个
        // filename: '[name].js'             // 多个 
        // filename: '[name].[hash].js'      // 避免缓存 
        // filename: '[name].[hash:7].js'    // 截取指定 
        filename: '[name].[chunkhash:7].js'  // 内容hash 
        
        // 区别：hash每次都会有一个唯一的标识 只要内容变了 全部重新生成
        //      chunkhash基于每个文件的内容 修改了 只会这个文件重新生成
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                // use: ['style-loader', 'css-loader'],
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
        ],
    },
    plugins: [
        //说明：功能让webpack变得更强
        //作用：CSS单独文件存放
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
        //作用：给public/index.js自动引入打包后的js等文件
        //new HtmlWebpackPlugin()
        new HtmlWebpackPlugin({
            // 自定义变量
            title: "神龙教主WEBPACK脚手架",
            desc: "神龙教主、洪福齐天、寿与天齐",
            // 输出到dist下面的名称、默认index.html
            filename: 'index.html',
            // 模板文件
            template: 'public/index.html'
        })
    ]
};

步骤3：重新build

4、打包文件分类存放

static/js

static/css

// 导入模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 导出配置
module.exports = {
    // 指定入口文件
    // entry: './src/index.js',  默认
    // entry: './src/qf.js',//   指定
    entry: {
        qf: './src/qf.js',
        home: './src/home.js',
        about: './src/about.js'
    },

    // 指定出口文件
    output: {
        // 说明：path.resolve 这是使用node中path模块的方法
        // 作用：目录分隔符  linux/mac系统  / 斜杠  win系统 \ 反斜杠
        // 说明：__dirname这是node中的变量  值是动态变化
        // 作用：获取当前文件所在目录路径  webpack.config.js
        // 含义：当前文件所在目录/dist
        // path: path.resolve(__dirname, 'dist'),

        // 说明：process是node进程模块、全局变量不需要引入直接使用
        // 语法：process.cwd() 获取当前DOS窗口指定命令路径
        // 咱们：一般都是在项目根目录下执行
        path: path.resolve(process.cwd(), 'dist'),

        // 默认HTTP请求状态码：200  有请求 、有响应数据
        // 然后浏览器都有缓存机制：304 有请求、有响应【没】有数据  数据来源于浏览器缓存
        // 如果你看过我之前在课件中发的nginx里面有一个词：expires 、gzip  直接不发送请求
        // 缓存机制：文件名  用户第1次访问后根据文件名缓存，第2次就不发送请求
        // 问题：每次项目build上线文件名都一样
        // 你跟新、但是文件名都一样用户还是用的以前的js、css新功能没办法实现.
        // 解决：每次build之后都会产生一个新的文件名
        // filename: 'qf.js'                 // 单个
        // filename: '[name].js'             // 多个 
        // filename: '[name].[hash].js'      // 避免缓存 
        // filename: '[name].[hash:7].js'    // 截取指定 
        // filename: '[name].[chunkhash:7].js'  // 内容hash 
        filename: 'static/js/[name].[chunkhash:7].js'  // 内容hash 
        
        // 区别：hash每次都会有一个唯一的标识 只要内容变了 全部重新生成
        //      chunkhash基于每个文件的内容 修改了 只会这个文件重新生成
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                // use: ['style-loader', 'css-loader'],
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
        ],
    },
    plugins: [
        //说明：功能让webpack变得更强
        //作用：CSS单独文件存放
        new MiniCssExtractPlugin({
            // filename: '[name].css',
            filename: 'static/css/[name].css',
        }),
        //作用：给public/index.js自动引入打包后的js等文件
        //new HtmlWebpackPlugin()
        new HtmlWebpackPlugin({
            // 自定义变量
            title: "cyyWEBPACK脚手架",
            desc: "vixx",
            // 输出到dist下面的名称、默认index.html
            filename: 'index.html',
            // 模板文件
            template: 'public/index.html'
        })
    ]
};

■开发服务器配置

（webpack-dev-server）

内存 > 文件 > 数据库/文件

发现：每次修改都需要重新打包
解决：安装webapck-dev-server模块（1-提供web服务器，2-自动打包，3-内存）
实现

1安装

yarn add webpack-dev-server --dev

2修改package.json文件增加开发服务器

"scripts": {
 "build": "webpack --mode=production --config scripts/webpack.config.js",
 "dev": "webpack-dev-server --mode=development --config scripts/webpack.config.js"
}

3修改webpack.config.js增加配置信息

//.......

module.exports = {
 devServer: {
   open: true,  // yarn 之后自动打开浏览器
   port: 3000   // 默认端口
 },
 //.......
};

■loaders配置

（css预处理、postcss处理css兼容）

明确需求

说明：在写项目时，我们需要使用css预处理sass/less等

思考：默认支持吗

回答：不支持，解决通过sass-loader

css预处理

发现问题

步骤1：创建qf.scss文件
$color: green;
body { color: $color;}
步骤2：qf.js导入qf.scss文件
import './qf.css'
import './qf.scss'

console.log("hello，webopenfather 333")
步骤3：运行测试发现报错

解决问题

步骤1：解决https://www.npmjs.com/package/sass-loader

yarn add sass-loader node-sass --dev

module: {
 rules: [
     {
         test: /\.css$/i,
         // use: ['style-loader', 'css-loader'],
         use: [MiniCssExtractPlugin.loader, 'css-loader'],
     },
     {
         test: /\.s[ac]ss$/i,
         // use: ['style-loader', 'css-loader', 'sass-loader',],
         use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader',],
     },
 ],
},

步骤5：修改index.html

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
 <meta name="description" content="<%= htmlWebpackPlugin.options.desc %>">
 <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
 <div id="root">
   <h1>你好，世界</h1>
 </div>
</body>
</html>

postcss处理css兼容

解决

通过postcss的autoprefixer插件，

写标准css后autoprefixer会自动帮你添加浏览器前缀的

手册 https://www.npmjs.com/package/autoprefixer 搜索webpack

步骤1：安装

yarn add postcss-loader autoprefixer --dev

步骤2：修改webpack.config.js

// ...

module.exports = {
    // ...
    module: {
      rules: [ 
        {
          test: /\.s[ac]ss$/i,
          use: [
          	MiniCssExtractPlugin.loader, 'css-loader',  'sass-loader', 
          	'postcss-loader'
          ],
        },
        {
          test: /\.css$/i,
          use: [
          	MiniCssExtractPlugin.loader, 'css-loader', 
          	'postcss-loader'
          ],
        },
      ],
    },
};

步骤3：创建postcss.config.js文件

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

步骤4：修改css文件

::placeholder {
 color: gray;
}

步骤5：yarn build 查看效果

■loaders配置（图片等资源文件处理）

1、说明

思考：开发中需要打包图片等静态资源，如何实现呢

回答：通过file-loader、url-loader等

思考：如果不需要webpack打包呢

回答：通过copy-webpack-plugin模块

2、图片资源打包（file-loader）

步骤1：修改qf.scss

h1 {
    width: 255px;
    height: 255px;
    text-align: center;
    background: url(./assets/az.jpg)
}

步骤2：安装模块

yarn add file-loader --dev

步骤3：修改webapck.config.js配置文件

{
    test: /\.(png|jpe?g|gif)$/i,
    loader: 'file-loader',
    options: {
        name: 'static/images/[name].[ext]',
        publicPath: '/',
	},
},

步骤4：yarn dev 查看效果

3、图片打包优化（url-loader）

说明：部分体积小的图片可以通过base64图片编码优化，减少HTTP请求
步骤1：安装模块 -> 配置

yarn add url-loader --dev

步骤2：修改webpack.config.js配置文件

// url-loader含file-loader
// {
//   test: /\.(png|jpe?g|gif)$/i,
//   loader: 'file-loader',
//   options: {
//     name: 'static/images/[name].[ext]',
//     publicPath: '/',
//   },
// },
{
    test: /\.(png|jpg|gif)$/i,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 15000, //图片超过指定字节不编码   1024*3
                name: 'static/images/[name].[ext]',
                publicPath: '/',
            },
        },
    ],
},

步骤3：运行【yarn dev】查看是否是base64编码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eSltNQwB-1598448775358)(images/1588836017016.png)]

4、静态资源拷贝（copy-webpack-plugin）

说明：在实际项目中也有部分资源不需要打包，思考如何解决
回答：通过copy-webpack-plugin模块
步骤1：安装模块-配置

yarn add copy-webpack-plugin --dev

步骤2：配置

const CopyPlugin = require('copy-webpack-plugin');

new CopyPlugin([
	{ 
        from: path.resolve(process.cwd(), 'src/static/css'), 
        to: path.resolve(process.cwd(), 'dist/static/css'), 
    },
    { 
        from: path.resolve(process.cwd(), 'src/static/js'), 
        to: path.resolve(process.cwd(), 'dist/static/js'), 
    }, 
    { 
        from: path.resolve(process.cwd(), 'src/static/images'), 
        to: path.resolve(process.cwd(), 'dist/static/images'), 
    },
]),

步骤3：创建src\static\images目录放图片
步骤4：测试 yarn build

■loaders配置（babel）

说明：在开发中经常会用到es6+语法

思考：如何保证兼容性呢

回答：通过babel-loader模块

------------------------------------------------------------

步骤1：打开qf.js输入下述代码

async function sayBy() {
  const result = await fetch('https://baidu.com')
  console.log(result)
}

sayBy()


之前：es5 ajax有异步回调地狱问题     		横向太深
因此：es6 promise就是解决异步回调地狱的      纵向太深
最后：es7 async await

步骤2：打包 -> 查看打包文件（是否存在es7语法）

yarn build

步骤3：安装babel-loader -> 配置 https://www.npmjs.com/package/babel-loader

yarn add babel-loader @babel/core @babel/preset-env

{
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }

步骤4：查看验证 yarn build

■快速生成react框架

步骤1：安装模块（刚才安装的所有模块

yarn add  @babel/core @babel/preset-env autoprefixer babel-loader copy-webpack-plugin css-loader file-loader html-webpack-plugin mini-css-extract-plugin node-sass postcss-loader sass-loader style-loader url-loader webpack webpack-cli webpack-dev-server --dev

步骤2：继续安装（需要js支持react安装的模块

yarn add react react-dom @babel/preset-react

步骤3：修改package.json

"scripts": {
    "build": "webpack --mode=production --config config/webpack.config.js",
    "dev": "webpack-dev-server --mode=development --config config/webpack.config.js"
  },

步骤4：创建config/webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    devServer: {
      open: true,
      port: 3000
    },
    // 入口文件
    entry: './src/index.js',
    // entry: './src/qf.js',
    // entry: {
    //   qf: './src/qf.js',
    //   about: './src/about.js',
    //   home: './src/home.js'
    // },
    output: {
      // path:输出目录
      // path.resolve 平台目录分隔符  win \  & linux/mac /
      // __dirname 当前文件所在目录
      // process.cwd() 获取当前命令所执行目录
      // path: __dirname + '/dist'
      // path: path.resolve(__dirname, 'dist'),
      path: path.resolve(process.cwd(), 'dist'),
      // filename: 'qf.js'      // 指定单文件
      // filename: '[name].js'  // 指定多文件
      // filename: '[name].[hash].js'  // 指定多文件，防缓存 304
      // filename: '[name].[hash:7].js'   // 指定长度
      filename: 'static/js/[name].[chunkhash:7].js'   // 内容生成的标识
    },
    module: {
      rules: [
        {
          test: /\.s[ac]ss$/i,
          // use: ['style-loader', 'css-loader', 'sass-loader'],
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', "postcss-loader"],
        },
        {
          test: /\.css$/i,
          // use: ['style-loader', 'css-loader'],
          use: [MiniCssExtractPlugin.loader, 'css-loader', "postcss-loader"],
        },
        // {
        //   test: /\.(png|jpe?g|gif)$/i,
        //   loader: 'file-loader',
        //   options: {
        //     name: 'static/images/[name].[ext]',
        //     publicPath: '/',
        //   },
        // },
        		// url-loader含file-loader
        // {
        //   test: /\.(png|jpe?g|gif)$/i,
        //   loader: 'file-loader',
        //   options: {
        //     name: 'static/images/[name].[ext]',
        //     publicPath: '/',
        //   },
        // },
        {
          test: /\.(png|jpg|gif)$/i,
          use: [
              {
                  loader: 'url-loader',
                  options: {
                      limit: 15000, //图片超过指定字节不编码
                      name: 'static/images/[name].[ext]',
                      publicPath: '/',
                  },
              },
          ],
        },
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ],
    },
    plugins: [
      // new HtmlWebpackPlugin(), // Generates default index.html
      new HtmlWebpackPlugin({  // Also generate a test.html
        // filename: 'test.html',  输出文件名称，默认index.html

        template: 'public/index.html',
        title: 'cyyWEBPACK',
        desc: '你好世界'
      }),

      new MiniCssExtractPlugin({
        filename: 'static/css/[name].css'
      }),

      new CopyPlugin([
        { 
          from: path.resolve(process.cwd(), 'src/static/css'), 
          to: path.resolve(process.cwd(), 'dist/static/css'), 
        }, 
        { 
          from: path.resolve(process.cwd(), 'src/static/js'), 
          to: path.resolve(process.cwd(), 'dist/static/js'), 
        }, 
        { 
          from: path.resolve(process.cwd(), 'src/static/images'), 
          to: path.resolve(process.cwd(), 'dist/static/images'), 
        },
      ]),
    ]
};

步骤5：在src目录下创建

index.js

// 导入库
import React from 'react'
import {render} from 'react-dom'

// 导入组件
import App from './App'

// 渲染
render(<App />, document.querySelector('#root'))

App.js

import React, { Component } from 'react';

//import './App.scss'

class App extends Component {
    render() {
        return (
            <div>
                <h1>My React CLI 666</h1>
            </div>
        );
    }
}

export default App;

步骤6：创建public/index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="description" content="<%= htmlWebpackPlugin.options.desc %>">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

步骤7：其他

项目根目录创建.babelrc(也就是src同级)

{ "presets":["@babel/react","@babel/env"]}

项目根目录创建postcss.config.js

module.exports = {
    plugins: [
      require('autoprefixer')
    ]
  }

步骤8：yarn dev测试

■面试题

webpack和gulp有什么区别

相同点：都是前端自动化构建工具
不同点：
1-gulp强调工作流程，
2-webpack前端模块化开发解决方案  强调模块化，压缩合并、预处理等，不过是它附带的功能
 

===================================================================
gulp强调工作流程，通过task方法设置一个个任务（例如文件压缩、合并、启动server等）
webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，
通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
总结区别
gulp模块化并没有强调，而是规范化前端开发流程
webpack更明显强调模块化开发，压缩合并、预处理等，不过是它附带的功能

webpack你做过哪些配置!!!

1.flexible实现rem自适应
2.配置css预处理（咱们写react项目的时候
3.解决跨域（咱们写react项目的时候你肯定配置跨域

https://www.webpackjs.com/configuration/dev-server/#devserver-proxy

Raken12

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录