webpack从零开始第2课: 配置文件

时间  2019-11-06
标签 webpack 开始 配置文件 繁體版
原文   原文链接

webpack目录css

本课参考资料html

一：新建配置文件

1.配置文件名

默认为webpack.config.js，能够为其它名字，但这时启动webpack要加参数--config来指定配置文件，如 webpack --config abc.config.jsvue

2.配置文件目录

默认为项目根目录，通常会放到./build文件夹下html5

提示: 当配置文件在根目录下，且配置文件名为 webpack.config.js，这两个条件都知足时，能够省略--config参数来启动webpack或wepack dev server

3.配置文件格式

  1. 最终输出一个对象 module.exports={...} ，这种最经常使用
  2. 最终输出一个函数
  3. 最终输出一个Promise
  4. 最终输出多项配置

3.1 第1种：输出为一个对象

格式为node

module.exports={...}

这个最经常使用，下面会就对象中的各个部分详细讲解react

3.2 第2种：输出为一个函数

参考: https://webpack.js.org/config... 
module.exports = function(env,arg){
  return {
    ...
  }
}
说明1. 返回值必须是一个对象
说明2. 函数有2个参数分别为 env和 arg,env为执行webpack时带入的，如 D:\03www2018\study\webpack2017>webpack --env prod，这时的env值就为prod，若是没有带参数--env，那么函数中获得的env为undefined。webpack命令行时可用的参数一共有94个，除了--env外的93个都放在第二个参数arg中了，它是一个对象，若是执行webpack命令时没有指定其它参数，那么它的值就是webpack给它的默认值
说明3：参数--env的格式与在webpack.config.js中输出函数中env参数之间的关系
env的值
说明4: 若是参数不在webpack的默认范围内，如 webpack --wang=haha --env=prod会报错 Unknown argument: wang
说明5:
如 根目录>webpack --progress true --watch true --env prod，这样获得的参数env的值为pro，参数arg的值为 
{ 
  ...
  watch: true,
  ...
  progress: true,
  ... 
}

3.3 第3种：输出为一个Promise

参考官方文档 https://webpack.js.org/config...

当须要异步加载配置文件时，得将配置文件输出为一个Promise,如webpack

module.exports = ()=>{
    return new Promise((resolved,rejected)=>{
        settimeout(()=>{
            resolve({
                entry: './app.js',
                /* ... */
            })
        },5000)
    })
}

3.4 第4种：输出多个配置

格式为web

module.exports=[{第一个配置对象},{第二个配置对象}]

二：各项配置重点讲解

完整结构以下npm

module.exports = {
  entry: "...", 
  output: {... },
  module: {
    rules: [
      {...},
      {...},      
    ],
  },
  resolve: {
    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    extensions: [".js", ".json", ".jsx", ".css"],
    alias: {...},
  },
  performance: {...  },
  devtool: "source-map", 
  context: __dirname, 
  target: "web", 
  externals: ["react", /^@angular\//],
  stats: "errors-only",
  devServer: { ...  },
  plugins: [   ...  ],
}

2.1 入口文件和上下文 entry & context

module.exports = {
    // 上下文是查找入口文件的基本目录，是一个绝对值，因此要用到path.resolve
    // 若是不设，默认为当前目录
    // 与命令行中的 webpack --context是同样的
    // 最后入口文件是 context+entry,
    // 能够写成./today/wang[前加./],./today/wang/[后加/]，不能写成/today/wang，若是../表示在当前目录再往上一层
    // context 除了这里的入口文件用到，象不少loader,plugin都会要用到这个值
    context: path.resolve(__dirname,'today/wang'),
    // entry能够为字符串|对象|数组三种形式
    // 字符串，适合spa,也就是单页网页，如手机网页
    // 下面这个entry最终的位置是 项目根目录/today/wang/app/entry.js
    // 前面./不能少，后面的.js能够省略，也能够写
    // 如下演示三种entry，实际中取一种就行
    entry: "./app/entry", // string | object | array
    // 数组
    entry: ["./home.js","./about.js","./contact.js"],
    // 对象，适合于多入口网站，也就是mpa，对象格式的每一个键，如home,about,contact是每一个入口文件chunk的名字，字符串和数组没有键，它也有一个chunk，名字默认为main    
    entry: {
      home: "./home.js",
      about: "./about.js",
      contact: "./contact.js"
    }, 
}

2.2 输出 output

输出的配置比较多，是重点json

参考: https://webpack.js.org/config... 
module.exports = {
       output:{
           //最后生成的打包文件所在的目录，是一个绝对值，，若是不指定，表示当前目录。若是文件夹不存在，会自动建立
           //这个路径除了这里会用到以外，象html插件,file-loader加载器也会用到
           // 最后生成的打包文件是 path+ filename
            path:path.resolve(__dirname,'../dist/'), 
            //filename中可使用[name],[id],[hash],[chunkhash][query]五种变量
            // filename中能够含子文件夹，如如filename: "a/b/c/[id]app.js"
            filename: 'wang.js', // 若是entry是个对象且有多个chunkname，那么这里会报错，但会生成一个wang.js,它的内容是第一个chunk的，建议entry是多个chunk的对象时，不要写固定名字，要带[name]变量
            filename: '[name]wang.js', // 此处的[name]与entry中的chunk名字对应，象上面entry是字符串和数组时，最后输出的文件名是mainwang.js，entry是对象，最后输出的文件名是 homewang.js,aboutwang.js,ccontact123wang.js
            filename: '[id]wang.js', //id从0,1这么增加的，象上面会生成0wang.js,1wang.js,2wang.js三个文件
            filename: "[name].[hash].bundle.js" //会打包成about.bab6d0fe556449a9229e.bundle,contact123.bab6d0fe556449a9229e.bundle,home.bab6d0fe556449a9229e.bundle，尤为要记住的是[hash]不要单独用，要与[name]或[id]配合用
            filename: "[chunkhash].yes.js", //78f16d7b19ff7ec1fd3a.yes.js,e12898a66041f68c1959.yes.js,f590b1f2de7b72dea5b3.yes.js，20位hash值
            hashDigestLength: 8  //指定最后chunkhash和hash变量生成字符串的长度，默认是20个字符
    }    
}

与hash有关的几个配置分别是hashDigest,hashDigestLength,hashFunction,hashSalt知道就行，

2.3 模块 modules

这个是重点，但比较简单，后面的教程中会涉及到,只要记住结构就行

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
        {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
                //name: '[path][name].[ext]',
                name: '[name]2.[ext]', //最后生成的文件名是 output.path+ outputPaht+ name，[name],[ext],[path]表示原来的文件名字，扩展名，路径
                //useRelativePath:true,
                outputPath: 'img/' // 后面的/不能少
            }  
          }
        ]
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },

2.4 解析 resolve

这个实用，必须掌握

resolve: {
    extensions: ['.js', '.vue', '.json'], //扩展名为.js,.vue,.json的能够忽略，如 import App from './app'，先在当前目录中找app.js，没有再找app.vue，没找到，再找.json，若是还没找到，报错
    alias: {
      'vue$': 'vue/dist/vue.esm.js', // 别名，这是一个正则的写法，表示以vue结尾的，如import Vue from 'vue' 表示 import Vue from 'vue/dist/vue.esm.js'
      '@': path.resolve('src'),// 这也是为懒人服务的,import HelloWorld from '@/components/HelloWorld'这里的@其实就是表明src这个目录 
      '#': path.resolve('src/ui/components') import Table from '#/table'
    }
  },

2.5 插件 plugins

模块和插件是重点，用单独的张姐讲

plugins: [
        new HtmlWebpackPlugin(HtmlWebpackPluginConfig), // 生成首页html5文件
        new webpack.DefinePlugin({BJ: JSON.stringify('北京'),})

    ],

2.6 开发服务器 DevServer

devServer: {
     //progress只在命令行用，不在配置文件中配
      contentBase: path.resolve(__dirname, "../dist/"), //网站的根目录为 根目录/dist，若是没有指定，使用process.cwd()函数取当前工做目录，工做目录>npm run dev
      port: 9000, //端口改成9000
      open:true, // 自动打开浏览器
      index:'front.html', // 与HtmlWebpackPlugin中配置filename同样
      inline:true, // 默认为true, 意思是，在打包时会注入一段代码到最后的js文件中，用来监视页面的改动而自动刷新页面,当为false时，网页自动刷新的模式是iframe，也就是将模板页放在一个frame中
      hot:false,
      publicPath: '/static456/',它与output.publicPath的值应该是同样的，值为上面contentBase目录的子目录，是放js,css,图片等资源的文件夹，记得打包时，将图片等拷贝或打包到该文件下
      compress:true //压缩
    }

2.7 开发工具 DevTool

2.8 目标 target

2.9 监控和监控选项 Watch and WatchOptions

watch:true,  // 会监视被导入的文件是否有改动，若是有改动，自动打包，但配置文件的改动不会被监视

2.10 外部 External

路径

剪不断，理还乱的路径

未完成，在整理中

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程