webpack基础

一、webpack是什么？

webpack是前端的静态资源打包工具，能让浏览器支持模块化，将这些模块按照指定的规则生成对应的静态资源。【浏览器不支持模块化，通过webpack转化成浏览器可以识别的页面】

二、集成的工具

1.babel：es6->es5。

2.http服务，将前端的项目部署到集成的webpack的服务器上，就能直接启动了。

3.集成热模块加载，修改某一个文件（比如html）时，不需要刷新页面。

三、打包配置文件

webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要结合插件来使用，这些插件在webpack中被称为Loader（加载器）来进行转换。

Loader可以理解为模块和资源的转换器，它本身是一个函数，参数接受的是源文件，返回值是转换后的结果。这样我们就可以通过require或import来加载任何类型的模块文件，比如css，图片。

创建文件：webpack.config.js进行配置

const path = require("path")
//引入插件
const Htmlwebpackplugin = require("html-webpack-plugin")
const {VueLoaderPlugin} = require('vue-loader')
const webpack = require("webpack")
module.exports = {
    //开发模式，对应的还有production,none,不写这一句话终端会报警告
    mode:"development",
    //入口
    entry:"./src/main.js",
    //出口,绝对路径,文件名称
    output:{
        path:path.join(__dirname,"./dist/"),
        filename:"bundle.js"
    },
    //配置插件
    plugins:[
        new Htmlwebpackplugin({
            //指定模板，将index.html打包到bundle.js所在目录中
            template:"index.html"
        }),
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    //实时重新加载
    devServer:{
        contentBase:"./dist",
        hot:true
    },
    module:{
        rules:[
            {
                //css
                test:/\.css$/,
                use:[
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                //图片
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    "file-loader"
                ]
            },
            {
                //babel
                test:/\.m?js$/,
                exclude: /(node_modules | bower_components)/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env']
                    }
                }
            },
            {
                //vue
                test:/\.vue$/,
                use:[
                    'vue-loader'
                ]
            }
        ]
    }
}

四、配置映射命令

在package.json中

"scripts": {
    "show": "webpack -v",
    "start": "node ./src/main.js",
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },

例如："show":"webpack -v"，如果要获得安装的webpack版本，在终端输入npm run show

五、一些指令

不推荐全局安装webpack，在自己电脑中的项目使用的是自己电脑中的webpack，如果项目到了另一台电脑上，第一，安装的版本会导致兼容性问题。第二，如果没有在电脑中全局安装webpack就无法打包。

所以推荐本地安装webpack，安装到对应的项目中。webpack打包工具随着项目走。

本地安装的时候，建议把webpack安装到devDependencies开发依赖（--save-dev）中，因为webpack是一个打包工具，需要的是结果，而不是工具。

为了区分生产环境，和开发环境依赖，--save（生产环境），--save-dev（开发环境）

1.本地安装webpack

webpack对版本的要求比较高，所以可能输入在输入某些没有指定版本的指令时，由于时间的先后会报错，根据版本重新安装即可。

npm init -y  //初始化
npm i -D webpack@4.35.2
npm i -D webpack-cli@3.3.6

2.处理css文件

npm install --save-dev style-loader@1.1.3 css-loader@3.4.2

3.图片

npm i --save-dev file-loader@5.1.0

4.文件路径问题

在html文件中引入打包后的文件后，就可以在浏览器中运行了，但是比如在打包图片后由于路径问题会导致图片加载不进去。

解决文件的路径问题：将index.html打包到bundle.js所在目录中，同时也会在index.html中自动的<script>引入bundle.js。html中可以不用引入，在终端启动后，dist文件夹中会出现index.html，在浏览器中打开即可。

npm i --save-dev html-webpack-plugin@3.2.0

5.实时重新加载

npm i --save-dev webpack-dev-server@3.10.3

6.babel浏览器兼容性

npm i -D babel-loader @babel/core @babel/preset-env

7.vue-loader

npm i -D vue-loader vue-template-compiler

8.实时加载

npm run dev