webpack学习(二) -- 配置文件及五大核心概念

614 阅读4分钟

webpack4配置学习

上文学习了webpack基础安装及执行,接下来学习一下webpack的一些基础配置。 webpack一切皆模块,默认处理js,无论是js、sass、png、jpg都属于模块,所有模块默认有一个入口模块,从入口模块开始打包,入口文件中有依赖其他模块,再把其他模块打包。

命令行配置

洗衣机

  • webpack是一个打包工具,为了更好的理解他的配置,我们来打个比方:
  • 小女子比较懒,平时洗衣服几乎都是洗衣机,洗衣机就相当于webpack工具,洗衣服的时候,直接塞进去,按开始键,洗衣机就按照它默认的程序执行洗衣步骤。
  • 如果哪天我要洗羊毛料的衣服,我需要按洗衣机的按钮,选择羊毛,这个过程就是配置过程,洗衣机就按照我配置的方法洗衣服。
  • 接下来就看看洗衣机怎么配置吧,哦不。。。是webpack

入口文件

  • 那么在我们没配置文件的时候,执行webpack默认的入口文件为:
当前执行命令的文件夹下-->src文件-->index.js

默认的出口文件为:

当前执行命令的文件夹下-->dist文件-->main.js
  • 自行配制

当默认有多个入口/默认的入口不在当前的src下的index.js时,就需要我们‘按洗衣机键子’啦,不然工具不知道该从哪个文件开始,从哪个文件输出,强制执行估计它会崩溃吧,哈哈:

1、在命令行输入

webpack demo.js -o bundle.js  
//demo.js为要打包的文件,-o为output,及输出,将打包文件输出为bundle.js文件,在html文件中script标签引入bundle.js即可

- 若要设置打包的模式
webpack demo.js -o bundle.js --mode development
//--mode development意为设置mode(模式)为开发模式

2、在文件夹中创建配置文件webpack.config.js

//下方详解

webpack核心概念及配置文件

配置文件

  • 遵循common.js规范
  • 在项目中,我们往往不会使用webpack的默认配置,在当前项目创建一个配置文件

webpack.config.js

  • 当在命令行输入webpack执行打包,会发现,它变心了,它就不找src下的index.js了,而是找我们的配置文件了,当然,前提是你的配置文件名为webpack.config.js。

  • 当一个项目不同环境使用不同打包配置文件时命令行输入

webpack --config 配置文件名

下面在了解核心概念时,我会同步到配置文件中。。。


概念

  • buddler

代表被打包过后的文件

入口(entry)

入口起点 --> 入口文件以来的模块和库 --> 处理依赖

单个/多个入口
  • webpack.config.js
module.exports = {
    entry:'./src/index.js'   //字符串形式
    entry: { //对象形式,支持多个入口文件
        main: './path/to/my/entry/file.js',
        app: './src/app.js'
     }
}

输出(output)

打包完毕 --> 输出bundles(打完包的部分) --> 输出文件命名(默认为./dist)

单个/多个输出
  • webpack.config.js
const path = require('path')
module.exports = {
    entry:'./src/index.js'   //入口
    output: { //出口
        path: path.resolve(__dirname,'dist'), //第一个path为当前路径,第二个path是node里提供的变量,需提前引入,__dirname找到当前文件(webpack.config.js)所在目录,'dist'为打包后输出的文件
        filename: 'my-first-webpack.bundle.js' //输出的单个文件名字
        filename: '[name].bundle.js' //当有多个入口文件时,就会打包成多个出口文件,name为入口文件名
    }
}
  • 执行webpack命令会发现dist文件中出现了my-first-webpack.bundle.js文件

加载器(loader)

用来将其他不同语言的文件(如:less、sass、typescript等)转为js文件

  • webpack.config.js
const path = require('path')
module.exports = {
    entry:'./src/index.js'   //入口
    output: { //出口
        path: path.resolve(__dirname,'dist'), 
        filename: 'my-first-webpack.bundle.js' 
    },
    module: { //loader模块
        rules: [
          { test: /\.css$/, use: 'css-loader' }, //use为使用什么类型的loader处理test匹配到的文件
          { test: /\.less$/, use: ['style-loader','css-loader','less-loader']} //匹配所有的less文件,先用less-loader解析,再用css-loader解析css,之后用style-loader使文件解析为行内样式表,前提是这三个模块和less都已下载安装
        ]
     }
}

了解插件(plugins)

下载 --> require进配置文件中 --> 应用到配置数组plugins中

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装,抽离出html文件,里面默认引入打包完的文件
const path = require('path')
module.exports = {
    entry:'./src/index.js'   //入口
    output: { //出口
        path: path.resolve(__dirname,'dist'), 
        filename: 'my-first-webpack.bundle.js' 
    },
    module: { //loader模块
        rules: [
          { test: /\.css$/, use: 'css-loader' }, 
          { test: /\.less$/, use: ['style-loader','css-loader','less-loader']} 
        ]
     },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

插件这里只做了解,之后会单独详解插件的配置~

模式

选择development 或 production 之中的一个,来设置 mode 参数

  • webpack.config.js
const path = require('path')
module.exports = {
    entry:'./src/index.js',   //入口
    output: { //出口
        path: path.resolve(__dirname,'dist'), 
        filename: 'my-first-webpack.bundle.js' 
    },
    mode: 'development'
}
  • development

开发模式,打包之后文件为未压缩版本的

  • production

生产模式,打包之后文件为压缩版本的,缺点在开发中保存都会在第一行,对开发人员不友好