webpack学习笔记

新建文件

在项目根目录创建三个或多个webpack配置文件

（1）webpack.base.config.js  //公用的配置放在这里面（可通过插件继承）

（2）webpack.develop.config.js  //开发环境中用到的配置文件

（3）webpack.publish.config.js   //生产环境中用到的配置文件

var path=require("path");
module.exports={
    //文件入口
    entry:path.resolve(__dirname,'src/app.js'),
    //输出文件
    output:{
        path:path.resolve(__dirname,'publish'),
        filename:'bundle.js'
    }

}
配置npm

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "develop":"webpack --config webpack.developer.config.js"

},
执行npm run deve即可

 

 

1.1.1     运行webpack

1、通过配置文件运行（通用）

（1）在根目录运行webpack的命令，默认会去查找名称为webpack.config.js的文件执行，如果没有就会报配置信息没有配置的错误。

Webpack

（2）这时候我们可以通过运行下面的命令进行配置文件的选择

webpack –-config  webpack.develop.config.js

2、通过cli命令运行（了解）

（1）webpack的cli也提供了命令可以进行运行，例如：

Webpack  -watch       // webpack的监视命令，文件发生变化自动编译

Webpack  entry ./src  output ./deploy   //配置文件的启动目录和输出目录

 

var path=require("path");
module.exports={
    //文件入口
    entry:path.resolve(__dirname,'src/app.js'),
    //输出文件
    output:{
        path:path.resolve(__dirname,'publish'),
        filename:'bundle.js'
    }

}