webpack是一个基于node的项目,所以首先需要确保你的电脑里面已经安装了node.js,以及npm。
node -v ,npm -v 查看版本信息, webpack -h 查看当前安装版本的信息
1、安装webpack: (我们常规直接使用 npm 的形式来安装)
sudo npm install webpack -g (全局)
sudo npm install webpack --save-dev (保存至package.json的devDependencies节点,依赖);
webpack -h 可以查看webpack安装的版本,我只是安装在当前目录并未全局安装,或者通过npm install webpack@2.4.x --save-dev安装指定版本的webpack到package.json文件中
当然如果常规项目还是把依赖写入 package.json 包去更人性化:
2、webpack可以在终端中使用,在基本的使用方法如下:
不使用配置文件webpack.config.js的用法
压缩
#{entry file}文件入口
#{destination for bundled file}文件输出路经
webpack {entry file} {destination for bundled file}
# webpack非全局安装的情况 当前路经找到node_modules安装的位置 node_modules/.bin/webpack 代表webpack
node_modules/.bin/webpack {entry file} {destination for bundled file}
package.json中加
"scripts": {"start":"webpack",},就不用找node_modules/.bin/webpack
使用配置文件进行构建:新建一个webpack.config.js
const path=require("path")
module.exports={
/**
* context是entry配置项的根目录(绝对路径)。如果output.pathinfo也设置了,它的pathinfo是基于这个根目录。
*“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。
*/
context = __dirname;
//entry唯一入口文件
entry: __dirname+"/main/js/main.js",
//output编译输出的配置项
output: {
path:path.resolve(__dirname,"../dist/js/") ,//打包后的文件存放的地方
filename:"bundle.js"//打包后输出文件的文件名
}
}
这样就会就近执行webpack.config文件