webpack 基础配置

Webpack的概念

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle（ 分块束*

1.全局安装( 选择以下一种即可 )

$ npm install webpack webpack-cli -g
$ cnpm install webpack webpack-cli -g
$ yarn add webpack webpack-cli global

2.局部安装

$ npm install webpack webpack-cli -D
$ cnpm install webpack webpack-cli -D
$ yarn add webpack webpack-cli -D

3.Webpack 使用

默认源代码开发目录为： src
默认的入口文件名称为： src/index.js
默认出口目录为： dist
默认出口打包文件名称为： main.js
通过mode来设置是那个环境下打包使用
开发环境打包： 代码不经过压缩、注释不会被删除

1.终端命令行使用

• 终端运行 webpack

    默认生成环境打包
  

-webpack --mode development/production 开发环境/生产环境打包

2.配置文件使用

• 默认webpack配置性文件名称为 webpack.config.js，这个文件是在根目录下运行的
• 运行 webpack 命令就会自动的去寻找这个 文件
• webpack.config.js文件中我们配置的就是 webpack的参数

3.配置webpack.config.js文件

我们接下来对这个文件进行配置，主要从以下几个方面来着手

1. 基础功能 ： 入口 出口 文件配置

2. 转换器： loader

3. 插件: plugin

    1.单页面配置
   

1.1 基础功能

/*
  webpack配置文件是
 一个独立的 Common.js 模块
*/


const path = require('path')


// 1. 创建模块


const webpackConfig = {
  entry: './src/index.js', //网络路径（ 相对路径 ）
  output: { //出口目录、文件的配置
    path: path.join( __dirname,'dist'), // 磁盘路径
    filename: 'js/app.js' // 入口文件将来打包到出口目录中的文件的路径和名称
  },
  mode: 'development'//确定是生产环境还是开发环境的打包
}


// 2. 导出模块


module.exports = webpackConfig

1.2 loader 转换器 可以将其他类型文件转换为我们想要的类型文件

/* ------------------------------- 转换器 ------------------------------ */
  // 在webpack.config.js中做如下配置：
  module: { //这里用来存放转换器的配置
    rules: [
      // {} //每一个对象就是一个转换器的配置
      {//css的处理
        test: /\.css$/, // 整个项目下匹配 .css结尾的文件
        use: ['style-loader','css-loader'] //两个顺序是不写反的
      }
    ]
  },

1.3 配置前端静态服务器

需要自动刷新： webServer 搭建前端开发服务器
    cnpm install webpack-dev-server -g | -D
    参数:
        命令行
        webpack-dev-server --port 8088 --open --mode development


        写到webpack.config.js配置文件:


        devServer: {//和module同级
            port: 8088,
            open:true
        }


        终端运行方式2: webpack-dev-server
    
    把运行命令放到package.json文件:    devServer可以不要了
        "scripts":{
            "dev": "webpack-dev-server  --port 8088 --open"
        }


        终端: npm run dev

1.5 优雅降级配置

先安装转换器需要的包
$ cnpm install babel-loader@8.0.4 @babel/core @babel/preset-env -D

配置webpack.config.js

在webpack.config.js的module.rules中进行配置
    {// 配置优雅降级
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }]


      }

1.6 html产出 - 依赖的是插件
安装插件需要的第三方包
$ cnpm i html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    //添加一个配置项
    plugins:[
            new HtmlWebpackPlugin({
                template: './public/index.html',
                filename: './index.html',//默认到output目录
                hash:true,//防止缓存,会给文件后面加入hash
                minify:{
                    removeAttributeQuotes:true//压缩 去掉引号
                }
            })
    ]

1.7 css抽离 - 依赖的是插件

将webpack编译过得css文件以 css外部引用的形式引入
*
安装插件
$ cnpm i extract-text-webpack-plugin -D

const ExtractTextWebapckPlugin= require("extract-text-webpack-plugin")


    //loader配置：
    use: ExtractTextWebapckPlugin.extract({
          use: 'css-loader'
        }) //不再需要style-loader


    //pulgin配置
    new ExtractTextWebapckPlugin('css/[name][hash:6].css')

1.8 图片打包

yarn add url-loader file-loader --dev


npm I url-loader file-loader --save-dev


    //url-loader 存base64  file-loader存文件（woff mp3）
    {
        test:/\.(png|jpg|gif)/,
        use:[{
          loader: 'url-loader',
          options: {
            limit: 5000,//字节少于5000 ——》 base64  超过5000  file
            outputPath: 'images/', 5000意思存到images
          }
        }]
      }


//css中引入 | js动态(模块化) 引入

1.9 静态资源拷贝

npm i copy-webpack-plugin -D


    const CopyWebpackPlugin = require('copy-webpack-plugin')
//plugin配置
    new CopyWebpackPlugin([
      { from: path.resolve(__dirname,'static'), to:                 path.resolve(__dirname,'build/static') }
    ])

1.10 配置文件拆分

"dev": "webpack --mode development --config config/webpack.config.dev.js",
"build": "webpack --mode production --config config/webpack.config.prod.js",
"server": "webpack-dev-server --mode development --config config/webpack.config.dev.js"

1.11 错误资源定制

在webpack.config.js中添加如下配置项：
devtool: 'source-map'  
制定报错信息的源