webpack打包工具用法

1.安装完webpack后，新建一个目录，目录中放入项目文件（只有一个js文件的情况下）

在命令行（cmd）中进入项目目录下（wpk-test），执行命令：

$ webpack show.js bundle.js

以上命令是将show.js打包成bundle.js，在index.html中引入bundle.js即可。
但以上举例并没有将webpack的打包功能体现出来，这与直接引入show.js几乎没有区别，那么在多个js中间有牵连依赖的情况下，我们该怎么使用webpack呢？

2.安装完webpack后，新建一个目录，目录中放入项目文件（多个js文件且它们之间相依赖的情况下）

image.png

其中，str.js中有一个函数，通过

module.exports=outstr;

来暴露出来以供别的js文件使用，str.js通过

var fn=require("./str.js");
console.log( fn("打印文字"））；

来使用str.js中的文字
最后再通过在命令行（cmd）中进入项目目录下（wpk-test），执行命令：

$ webpack show.js bundle.js

生成打包好的js文件引入html文件中即可。

3.打包样式文件

image.png

第一步，cmd进入项目目录执行

$ webpack init

一路回车下去即可（也可以自定义），项目目录下会出现一个json文件
接下来安装loader加载器

npm install css-loader style-loader

安装完成后，json文件变成了

image.png

此时，项目目录下新建style.css

image.png

此时，新建一个配置文件webpack.config.js，

module.exports = {
    entry: './src/js/show.js',
    output: {
        path:__dirname, 'dist', //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
        filename: "bundle.js"
    },
    module: {
        loaders: [
              {
                    test:/\.css$/
                    loader:'style-loader!css-loader'
              }
        ]
    }
};

此时项目目录（此时将目录进行了略微整理）

image.png
最后，在命令行执行webpack即可，倘若后面样式文件或js有修改，也执行webpack即可自动打包。