Webpack 知识点

⑴是静态模块打包器，当webpack处理应用程序时，会将所有这些模块打包成一个或多个文件。

⑵模块：

Webpack 可以处理js/css/图片、图标字体等单位

静态：开发过程中存在与本地的js/css/图片/图标字体等文件就是静态的，动态的内容webpack没办法处理

⑶初始化项目：npm init ；

安装webpack需要的包：

npm install --save-dev webpack-cli@3.3.12  webpack@4.44.1

配置webpack：

新建配置文件，所有包的配置都在这里：Webpack.config.js

⑷webpack的4个核心概念

 <script>
        // 1. entry 入口文件，从哪个文件开始打包
        // 单入口写法：entry: './src/index.js'
        // 多入口写法：
        // entry: {
        //   //多个页面，多个入口
        //   main:'./src/index.js',
        //   search:'./src/search.js'
        //    .....
        // }

        // 2. output 出口
        // 单出口写法：
        // output: {
        //     // 绝对路径，
        //     // 将打包后的文件放入当前目录下的dist文件夹中，打包// 后的文件名为bundle.js
        //     path: path.resolve(__dirname, 'dist'),
        //     filename: 'bundle.js'
        // }
        // 多出口写法：
        // output: {
        //     path: path.resolve(__dirname, 'dist'),
        //     // 打包后的文件名跟入口文件名保持一致
        //     filename: '[name].js',  // 此处的name就代表入口文// 件中的main和search
        // }
</script>