webpack的简单配置

安装版本

webpack安装需要依赖node环境中的npm工具，这里用的是webpack3.6.0版本，在终端中输入命令

npm install webpack@3.6.0 -g

@3.6.0表示版本号为3.6.0，-g表示安装为全局变量中

一般会在文件夹中新建一个src和一个dist文件，src是开发时的源文件，dist中放开发好后打包的文件，上线时讲dist中的文件放到服务器上，打包命令在终端中输入

 webpack ./src/main.js ./dist/built.js

这行代码表示将./src/main.js作为入口文件，自动整理其中的文件依赖关系，并将文件打包生成新的文件放到./dist中并命名为built.js

快捷方式

可以在文件夹中配置一个名为webpack.config.js的文件

其中entry为入口文件，output为一个对象，path属性为生成的文件所在的文件夹目录，这里需要用绝对路径，所以用node提供的核心模块path动态获取绝对路径，filename表示生成的文件名，这时候只要在终端中输入webpack就可以开始打包

npm run命令

npm init可以生成一个名为package.json的文件，文件中script属性的值可以为复杂的命令提供简单的方法

这里npm run build会被解析成build中的语句，并且此时使用webpack命令，webpack使用的是当前文件夹下的局部变量，局部变量安装不需要用-g

npm install webpack@3.6.0 --save-dev

这行代码表示安装webpack3.6.0版本到当前文件夹下，–save-dev表示是开发时依赖webpack，这个会在package.json中保存依赖关系，当文件不小心丢失可以根据package.json中保存的依赖关系一键安装