建立项目的webpack配置文件_自己开发组件库的webpack配置-CSDN博客

本文链接：https://blog.csdn.net/zjsfdx/article/details/78289343

1.在当前目录下新建2个文件夹
mkdir src
mkdir dist(存放静态资源的文件夹)

2.在当前目下新建index.html文件，引入打包后的bundle.js文件

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>


  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

3.cd src ：进入src文件夹
mkdir script : 在src目录下新建script文件夹(存放脚本)
mkdir style : 在src目录下新建style文件夹(存放less、sass等样式文件)

4.在当前目录下新建webpack.config.js配置文件
代码如下：

module.exports = {
    entry:'./src/script/main.js',       //打包入口文件
    output:{    
        path:__dirname + '/dist/js',    //打包后的文件路径
        filename:'bundle.js'            //打包后的文件名
    }
}

5.在src/script文件夹下新建main.js文件，代码如下：

function helloworld(){}

6.在命令行执行webpack命令，你会发现在dist文件夹下会生成js文件夹，在js文件夹里面就是我们的打包后的文件bundle.js

7.我们改下文件名字，把webpack.config.js改成webpack.dev.config.js，这时再在终端输入weback，你发现终端会出问题，如下：

No configuration file found and no output filename configured via CLI option.
A configuration file could be named 'webpack.config.js' in the current directory.
Use --help to display the CLI options.

那我们怎么才能打包成功呢？可以这样做，

webpack --config webpack.dev.config.js

结果发现打包再次生效，很神奇吧！

8.我们还是把文件名改回来吧，webpack.config.js

9.其实我们有很多的命令可以用，丰富我们的开发。打开package.json文件，
代码如下：

{
   "scripts":{
    "webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
  },
  "devDependencies": {
    "css-loader": "^0.28.7",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1"
  }

}

//增加script
//意思是：指定webpack配置文件，查看打包过程命令，查看打包模块,打包出来的字是彩色的，查看打包原因

在命令行输入npm run webpack,终端输出结果如下：

> webpack --config webpack.config.js --progress --display-modules --colors --display-reasons

Hash: 35cb086349332c27ce51
Version: webpack 3.8.1
Time: 72ms
    Asset    Size  Chunks             Chunk Names
bundle.js  2.5 kB       0  [emitted]  main
   [0] ./src/script/main.js 23 bytes {0} [built]