建立项目的webpack配置文件

1.安装之前步骤新建好项目文件，新增加dist 文件夹用来放置打包后的文件，style文件夹用来放置css，js，less等文件。

2.新建一个webpack.config.js文件用来写webpack配置文件。

配置代码：

//webpack 1.0 语法
/*module.exports = {
    entry:'./src/script/main.js',
    output:{
        path:'./dist/js',
        filename:'bundle.js'
    }
}
*/
//webpck 3.0 语法
//方法一
const path = require("path")

module.exports={

  entry:path.join(__dirname,"src/script/main.js"),

  output:{

    filename:"bundle.js",

    path:path.join(__dirname,"dist")
  }

}
//方法二
/*var path =require("path");

module.exports = {

    entry:'./src/script/main.js',

    output: {
        path:path.resolve(__dirname,'./dist/js'),

        filename:'bundle.js'
    }

}*/

用webpack 1.0的语法会报错：

打包成功后dist文件夹下会出现js文件夹，文件夹内有生成的bundle.js文件。

3,.当配置文件不用webpack.config.js这个名字，改成webpck.dev.config.js后，打包会报错.

这时候需要在命令行中指定对应的配置文件：

webpack --config webpack.dev.config.js
#webpack --config [指定的配置文件的文件名]

4.如果需要在配置中增加参数，可以在package.json文件的的scripts下添加对应的参数，然后配合npm的命令行则可以实现webpack的一些相关命令。

然后运行npm run webpack

{
  "name": "wpt",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"//添加webpack的命令行
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.11",
    "style-loader": "^0.20.3",
    "webpack": "^3.0.0"
  },
  "dependencies": {
    "babel-loader": "^7.1.4"
  },
  "description": ""
}

出现以下问题是因为–display-reasons少了个s

最终结果：