webpack学习与实践第一篇

1：webpack是什么？
是模块打包工具，它会将前端的所有的资源文件（js,css,json,img,less)都会作为模块处理。模块的依赖关系进行静态的分析，生成对应的静态资源。

2:什么是loader?
webapck本身只能处理js/json模块，如果要加载其他的模块，需要使用对应的loader,进行转换、加载。loader本身也是运行在node.js环境中的javascript模块，它是一个函数，接受源文件作为参数，返回转换的结果。

3：什么是插件？
可以完成一些loader不能完成的功能，在webpack配置信息plugins选项中进行一个指定。
cleanWebpackPlugin:自动清除指定文件夹资源
HtmlWebpackPlugin:自动生成html文件
UglifyJSPlugin:压缩js文件

4：
安装：npm i webpack webpack-cli -D
核心模块
Webpack的五个核心
Entry:打包的入口
Output：打包到哪儿去
Loader:通过loader不能直接打包的文件
Plugins：插件设置
Mode: 设置模式

5：
1：对css，less样式进行打包。
首先在webpack.config.js中进行一个配置：

const {resolve}=require('path');
module.exports={
    //入口起点
    entry: resolve(__dirname,'src/index.js'),
    //输出
    output:{
     filename:'built.js',
     //当前目录的绝对路径
     path:resolve(__dirname,'bulid')
    },
    //loader的配置
    module:{
        rules:[
          {
           //匹配哪些文件
           test: /\.css$/,
           //使用哪些loader
           use:[
               //创建style的标签，然后将js中的样式模式资源插入进行，添加到head中生效
               'style-loader',
               //将css文件变成common.js模块加载js中，里面是样式字符串
               'css-loader'
           ]
          },
          {
            //匹配哪些文件
            test: /\.less$/,
            //使用哪些loader
            use:[
                //创建style的标签，然后将js中的样式模式资源插入进行，添加到head中生效
                'style-loader',
                //将css文件变成common.js模块加载js中，里面是样式字符串
                'css-loader',
                'less-loader'

            ]
           }
        ]
    },
     plugins:[
         
     ]
    
    ,
    //开发者环境，生产者环境（会对代码进行压缩）
    mode:'development'
    // mode:'production'
}

下载less-loader,css-loader,style-loader
npm i less-loader css-loader style-loader -D

输入webpack进行打包

2：对html进行打包，需要用到插件
安装：npm i html-webpack-plugin -D
在webpack.config.js中进行一个配置：

const { resolve } = require("path");
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    entry:'./src/index.js',
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[

        ]
    },
    plugins:[
    //创建一个空的html文件，自动引入打包输出的所有的资源（js/css)
    //需求：需要有结构的html文件
      new HtmlWebpackPlugin({
          template:'./src/index.html'
      })
    ],
    mode:'development'
    // mode:'production'
}

输入webpack进行打包

3：Url-loader
下载资源：npm i url-loader file-loader -D
在webpack.config.js中进行一个配置：


4:上面的打包处理不了html中引入的图片
解决方法：
npm i url-loader file-loader -D
npm i html-loader -D

5:打包其他的资源
安装 npm i file-loader -D

6:解决webpack重复打包的问题，当数据更新自动打包：
DevServer
配置：在webpack.config.js中配置

  devServer:{
        // contentBase: resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true
        }

下载devServer的包
npm i webpack-dev-server -D

7：我们可以将不同的包，打包到不同的文件夹中

const {resolve}=require('path');
const  HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
    entry:'./src/js/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build')
    },
    module:{
     rules:[
      
     ]
    },
    plugins:[
     new HtmlWebpackPlugin({
         template:'./src/index.html'
     })
    ],
    
    mode:'development',
    devServer:{
        // contentBase: resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true
        }
}

js放到js文件夹下面，图片放到imgs中

8：开发环境下出现的问题：
A：css代码存在js中比较大，会造成闪屏，所以需要将css单独提取出来
生产环境下进行配置：

B：对代码进行压缩
设置代码压缩的插件optimize-css-assets-webpack-plugin
安装 npm optimize-css-assets-webpack-plugin

c：兼容性能的考虑
先在package.json中设置兼容的浏览器：

webpack.config.js下面进行配置:


d:js的eslint的检查
配置：

const {resolve}=require('path');
const  HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
    entry:'./src/js/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build')
    },
    module:{
     rules:[
         {
           test:/\.js$/,
           exclude:/node_modules/,
           loader:'eslint-loader',
           //自动检查
           options:{
               fix:true
           }
         }
     ]
    },
    plugins:[
     new HtmlWebpackPlugin({
         template:'./src/index.html'
     })
    ],
    
    mode:'development',
    devServer:{
        // contentBase: resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true
        }
}

下载资源：
npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

packge.json中配置：

 "eslintConfig":{
    "extends":"airbnb-base",
    "rules": {
      "no-console": "off"
    }
  }

不需要进行eslint的检查设置如下面：