webpack

什么是webpack

webpack是一个模块打包器（bundler）。
在webpack看来，前端的所有资源文件（js/json/css/img/less/...）都会作为模块处理，他将根据模块的依赖关系进行静态分析，生成对应的静态资源。

理解loader

webpack本身只能加载js/json模块，如果要加载其他类型的文件（模块），就需要对应的loader进行转换加载；它本身也是一个函数，接受源文件作为参数，返回转换的结果，loader一般以xxx-loader的方式命名，xxx代表了loader要做的的转换功能，比如：json-loader

配置文件（默认）

webpack.config.js:是一个node模块，返回一个json格式的配置信息对象

插件

插件可以完成一些loader不能完成的功能
插件的使用一般是在webpack的配置信息plugins选项中指定
CleanWebpackPlugin：自动清除指定文件夹资源
HtmlWebpackPlugin：自动生成HTML文件
UglifyJSPlugin:压缩js文件

webpack可以进行0配置
文件夹中只有一个index.js文件。在项目根文件目录下运行webpack，会自动生成相关依赖，并自动生成dist文件夹以及它下面的main.js,这都是依赖中默认的输出的。可以直接鼠标右键跑main.js的代码在控制台也是可以输出的（node环境）。

image.png image.png

webpack打包支持js模块化，通过建立一个a.js文件,并在index文件中导入，看打包输出

image.png image.png

手动配置webpack=>webpack.config.js 在终端运行webpack，直接生成build文件夹，需要在index.html中引入

image.png image.png

自定义配置文件，我们可以自定义一个webpack.config.my.js文件
直接在终端输入指令：webpack --config webpack.config.my.js，但是每次打包都要把配置路径带上，如果直接输入指令webpack，就是默认的webpack.config.js配置打包。这样一来比较麻烦，所以我们会在配置文件中配置写脚本去执行。直接在package.json中配置scripts如下：
build是指指令key可以写成b或者其他名字。直接在终端输入npm run buid。也可以把webpack后面的字符串省略写成，npm run build -- --config webpack.config.my.js

{
  "name": "webpack4",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --config webpack.config.my.js"
  }
}

webpack配置服务
首先确保安装了下面的环境

1、初始化生成package.json文件

npm init -y

2、安装webpack到该目录： 

npm install --save-dev webpack 

npm install --save-dev webpack-cli

通过运行指令webpack-dev-server，只能以目录的形式展现

image.png

我们要以端口服务的形式展现就要配置相应的服务器，在webpack.config.js中配置devServer，在build中加个index.html文件，输入npm run dev

module.exports = {
    devServer: {
        port: 9000,
        progress: true,//进度条
        //告诉本地服务从哪里提供内容且只有在您想要提供静态文件时才需要这样做 其实就是index.html所在的目录
        contentBase: './build',
        compress: true
    },
    mode: 'development',//模式 默认两种模式 production  development
    // production 生产环境 代码会压缩 体积小
    entry: './src/index.js',//入口
    output: {
        filename: 'bundle.js',//打包后的文件名
        path: path.resolve(__dirname, 'build')
        //路径必须是一个绝对路径 需要node的核心模块path
        // resolve方法能将相对路径解析成绝对路径
        //__dirname意思是以当前目录下生成一个build目录，不加也可以
    }
}

配置html组件，自动绑定index.html文件
npm add html-webpack-plugin -D安装插件，在配置文件中引入

image.png

配置css，在module中配置相关的模块

plugins: [//数组放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true
            },
            hash: true
        })
    ],
    module: {
        rules: [//规则 css-loader 接续@import这种语法的
            // style-loader他是把css插入到head的标签中
            // loader的特点  希望单一
            // loader的用法 字符串只用一个loader
            // 多个loader需要[]
            // loader的顺序 默认是从从右向左执行
            // loader还可以写成对象方式
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    'css-loader'
                ]
            }
        ]

输入指令npm add css-loader style-loader -D
然后npm run dev配置文件中有生成相应的版本配置信息

{
  "name": "webpack4",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --config webpack.config.my.js",
    "dev": "webpack-dev-server"
  },
  "devDependencies": {
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "less-loader": "^5.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  },
  "dependencies": {
    "webpack-dev-server": "^3.8.2"
  }
}

配置less
建立一个index.less文件，写入样式

image.png

然后在index.js中导入require('./index.less')
输入指令npm add less less-loader -D下载相关模块
在配置中配置相关模块

            {
                // 可以处理less文件  sass文件  stylus文件  node-sass sass-loader
                test: /\.less$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            // 将样式插入head上面，不然在head中写样式会被覆盖，默认插入就是head里
                            insert: 'top'
                        }
                    },
                    'css-loader',//@important 解析路径
                    'less-loader',//将less---css
                ]
            }

然后npm run dev配置文件中有生成相应的版本配置信息