阅读 19

webpack-前端打包工具----来自一个菜鸡对自己的笔记

webpack核心概念

入口 entry

resolve

输出(出口)output

loader

插件 plugins

_dirname总是指向被执行 js 文件的绝对路径;
path.resolve(_dirname)拼接到当前路径
path.join(__dirname, '..', dir)拼接路径

1. 入口 ertry

单页面传入String

          entry: {
            app: './src/main.js' //单页面应用时,直接到./src/main.js
          }
复制代码

多页面 或者 分离应用与第三方库 传入Object

        entry: {
          pageOne: './src/pageOne/index.js',
          pageTwo: './src/pageTwo/index.js',
          pageThree: './src/pageThree/index.js'
        }
        entry: {
          app: './src/app.js',
          vendors: './src/vendors.js'
        }
复制代码

2.resolve

    2.1.extensions 可以通过配置文件后缀名,可以在import中省略文件后缀名
复制代码
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            '@assets': resolve('src/assets'),
            }
        }
        import Hello from '@components/Hello';//此处可以省略.vue
   2.2.alias 设置别名,直接调用即可获得匹配的路径,如上使用@即可直接到src路径,
       但在<style></style>里面使用要加 ~ ;定义一个resolve函数。返回想要得到的路径
复制代码
        function resolve(dir) {
                return path.join(__dirname, '..', dir)
        }

3. output 出口

在 webpack 中配置 output 属性的最低要求是,将它的值设置为一个对象

    output: {
      filename: 'bundle.js',
      path: '/home/proj/public/assets'
    }
复制代码

其中filename 输出的是文件名称,path输出的是绝对路径,可以直接用 filename: [name].js ,做路径的拼接

4. loader 用于对模块的源代码进行转换

例如

    //自定义一个loader,设置规则
    const createLintingRule = () => ({
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        //检测哪部分的文件, exclude该属性表示排除哪些文件被检测
        include: [resolve('src'), resolve('test')],
        options: {
            formatter: require('eslint-friendly-formatter'),
            emitWarning: !config.dev.showEslintErrorsInOverlay
         }
        })
        //在rule中添加各种loader
        module: {
            rules: [
                ...createLintingRule(),
              {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
              },
              {
                //处理图片loader,正则图片匹配后缀的文件进行处理
                test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
                use: [{
                  loader: 'url-loader',
                  options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                  }
                },
                ],
              }
            ]
        }
复制代码

5.插件 plugins

关注下面的标签,发现更多相似文章
评论