webpack的入门学习

Posted 2020-10-09

1、配置文件创建

新建两个文件夹dist和src，以及内部的文件。

再新建一个配置文件webpack.config.js

为什么要新建这么一个文件呢？

因为当我们在命令行中直接使用“webpack”命令去对项目进行打包时，webpack会去项目的根目录下直接去找webpack.config.js这个配置文件，webpack会将其作为默认的配置去运行打包

 

webpack.config.js配置文件如下：

module.exports = {

entry : {

main : __dirname + ‘/src/script/main.js‘,

a : __dirname + ‘/src/script/a.js‘

},

output:{

path : __dirname + ‘/dist/js‘,   //打包后文件放置的路径

filename: ‘[name]-[hash].js‘，   //打包后文件的文件名

       publicPath : ‘http://cdn.com/‘    //理解成占位符

}

}

备注：entry 表示唯一入口JS，后面可以跟一个js，也可以跟JSON，也可以跟数组形式。

output表示输出的环境，path表示根路径，filename表示，输出的文件名称，[name]可以自动获取entry传进来的文件的名称，[hash]获取20位的哈希值，为了唯一性，每次执行都不一样（修改过的文件），没修改的不变。

注意：[hash:5]表示获取5位的hash值。（默认为20位）

publicPath 表示占位符，如果有这参数，以后输出的js文件前头加上该字段。

这样就会在dist的文件夹中的js文件夹里多了两个js文件.

 

 

为了简便起见，在package.json中的“script”中添加"webpack" : "webpack --config webpack.config.js --display-modules --progress --colors  --display-reasons"

以后不用输入很长的命令行，可以这么写：

npm run webpack

 

注意：entry指打包的入口从哪个文件开始（格式可以是一个字符串（即单个路径）、数组（多个路径）、json）。当为一个文件时，就会将所有要打包的文件全部引入到这个文件来进行打包，并打包成一个文件；当是一个数组时，即会有多个不存在依赖（各运行各自的）的文件打包成一个文件；当为一个json格式（多页面应用时使用）时，则要以key：value形式来配置，value可以是字符串，也可以是数组；

 

output：指打包后文件放在哪。filename:不要将文件名写死（entry的格式为json时，且入口文件为多个时，一旦写死，则会只生成一个文件），最好写成filename: ‘[name]-[hash].js‘，