webpack入门笔记

1. 新建项目文件夹 mkdir 文件夹名

2. npm init 初始化 package.json 包管理文件

3. 安装依赖项 webpack、webpack-cli

4. 在文件夹下新建入口js文件、webpack配置文件。

   在package.json的scripts脚本命令中用--config给webpack指定配置文件。

   "scripts": {
       "start": "webpack --config ./build/webpack.base.js"
   }
   

   在webpack.base.js配置文件中配置入口文件地址及打包输出文件。

   const path = require('path')
   
   module.exports = {
       entry: "./src/index.js", // 配置项目入口文件路径，相对项目执行目录地址
       output: {
           filename: "bundle.js", // 打包后输出的js文件名
           path: path.resolve(__dirname, "../dist"), // 打包后文件输出的文件夹
           publicPath: path.resolve(__dirname, "../dist") // 配置打包后图片等文件的访问路径
       }
   }
   

   项目文件结构：

   project │ README.md │ package.json
   │ ... └───build │ │ webpack.base.js └───dist └───node_modules └───src | index.html | index.js

project │ package.json
│ ... └───build └───dist └───node_modules └───src └───xxxx1 └───example
| App.vue | router.js └───views └───pageFolder | App.vue | style.less └───images └───xxxx2

5. 配置webpack的loader

   loader用于对源代码进行转换，类似其他构建工具重的'任务(task)'。

   babel：将es6、es7代码转换成浏览器识别的ES5代码。涉及三个依赖：

   • babel-loader 告诉webpack如何运行babel
   • @babel/core 理解为编辑器，用于解析代码
   • @babel/preset-env 根据不同环境转换代码

   module: {
       rules: [
        {
            test: '/\.js$/',
            use: ['babel-loader']
        }
       ]
   }
   

   url-loader: 将图片转为base64字符串 file-loader: 图片超出配置大小后，由file-loader加载图片

   module: {
       rules: [
        {
            test: '/\.(png|jpe?g|git|svg)$/',
            use: [{
                loader: 'url-loader',
                options: {
                    esmodule: false, // file-loader版本为4.3.0以上时需设置，否则require引入的图片路径会变为'[object Module]'
                    limit: 10000 // 小于10k大小的图片将被转为base64，超出大小后由file-loader加载图片
                    name: '/img/[name].[hash].[ext]' // 由file-loader加载的图片转换为此路径及命名打包到dist文件夹中
                }
            }]
        }
       ]
   }