一:新建webpack.config.js文件
在之前的目录基础上,新建一个新的文件:webpack.config.js文件。
每次文件的内容发生改变的时候,都要执行一段终端命令来更新文件。如果文件结构复杂,那么这条指令会非常负责。因此,需要是要到wenpack.config.js来告诉webpack,需要打包哪个文件,并将文件生成在哪里。
在webpack.config.js文件中输入内容:
module.exports = {
entry: './src/main.js',
output: {
path: 'E://前端//webpack学习//01-webpack的使用//02-webpack文件的配置//dist',
filename: 'bundle.js'
}
}
它将告诉webpack ,将src目录下的main.js文件进行打包。打包到dist目录下,并且生成一个名为bundle.js的文件。
直接在终端运行webpack命令,就可以在dist目录下生成一个bundle.js文件。
此时,path需要存放一个绝对路径,如果这个配置文件需要复用,则每次使用的时候都要手动更改,因此可以采用其他方式来告诉webpack需要存放文件的位置。
二:使用npm init
在终端中运行命令npm init,这将初始化一些项目信息。此时终端会进入一个输入状态,让你输入关于这个项目的一些基本信息。
设置package name为meetwebpack,并将version设置为1.0.0,主要的main入口设置,作者以及注释等其余的可以空格跳过。最后会有一个让你确认所输入的信息 。并且输入yes
此时,会在目录中生成一个package.json文件,里面存储了刚设置的一些信息。
在初始化完成之后,就可以在终端运行命令npm install来安装所有需要的文件。随后更改webpack.config.js文件,现在我们可以声明并使用一个变量path,里面存储了当前项目所在的路径。
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
拥有了项目所在的路径后,通过这个变量path的resolve方法,拼接两个字符创组成一个绝对路径。__dirname是npm中存在的变量,存储项目的路径,dist为目录文件夹。
此时,不管这个项目被复制到哪里,执行webpack的时候都会在项目所在的目录的dist文件夹中打包生成文件。有些时候,webpack.config.js文件可能不是按规定命名,可能为其他名称。这时候不能使用webpack来打包生成文件,需要更复杂的命令。如果能让npm来代理执行命令并且不用在乎是否webpack.config.js文件是否存在。
通过修改package.json文件来实现。
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "My first webpack",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "hrc",
"license": "ISC"
}
我们可以运行npm run test命令,来执行test所对应的语句命令。模仿这种命令方式,我们可以通过声明一个“build”来告诉npm,执行build的时候,实际执行的命令是webpack。这样不管后续的命令多复杂,通过npm来执行一个特定的名字,就可以达到执行一长串命令的效果。
此时的npm run build等同于运行webpack命令