webpack学习笔记（基于webpack3）

1、全局安装webpack

cnpm install webpack@3.12 -g 
//查看版本号
webpack -v

这里我装的是3.12.0的版本。

2、创建一个文件夹webpackdemo,用来做测试的。

使用cnpm init 初始化一下，然后局部安装webpack。

cnpm i webpack@3.8 --save-dev

然后在目录文件夹下新建一个src文件夹，下新建一个entry.js文件。

//entry.js
document.write("hello , webpack ")

webpack初体验：

webpack src/entry.js dist/js/bundle.js

上面Time 是打包所用的时间。
Asset 打包后的静态资源。
Size 大小
Chunk Name 模块名称

打包完后，目录下出现dist文件夹，文件夹下有bundle.js文件。
根目录下，创建index.html文件，引入bundle.js文件。


再多创建一个文件试试。

//math.js
export function foo(x) {
    return x*x;
}
export function bar(x){
    return x**2
}

在entry.js 中引用

3、json 文件的打包

创建一个json 文件。

//test.json
{
    "name":"guo",
    "age":19
}

重新打包。

4、webpack.config.js文件的配置

根目录下新建一个文件webpack.config.js.

const path = require('path')

module.exports = {
    entry:'./src/entry.js',//入口文件
    output:{ //输出文件
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
}

然后使用webpack命令就可以打包了。

5、打包css文件

先安装css-loader、style-loader.

cnpm i css-loader style-loader --save-dev

新建一个css文件，

//test.css
body{
    background-color: brown
}

在entry.js文件中引入

webpack.config.js文件中添加对应 的module
const path = require(‘path’)

module.exports = {
    entry:'./src/entry.js',
    output:{
        path:path.resolve(__dirname,'dist/js'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }
}

使用webpack打包。

6、图片的打包

首先安装url-loader、file-loader.

cnpm i url-loader file-loader --save-dev

webpack.config.js作如下配置。

index.html文件添加如下代码：

test.css文件添加如下代码：

src文件夹下添加2个图片，其中一个小于8KB。

打包后，发现有张图片没有加载出来。

小于8KB的图片加载出来了，这是因为webpack把小于8KB的图片转成了base64位的格式，直接加载的。

而大于8KB 的图片则没有，而是打包到了对应 得到文件夹下。

这里没有加载出来，是因为文件的引用路径不对。
此时有两种解决方式：
1、把index.html文件移动到对应的目录下，并把JS的引用路劲修改正确。
2、在webpack.config.js文件夹下添加如下代码。

publicPath是打包后的图片所在的目录。
这里采用第二种测试：

7、热启动

安装webpack-dev-server.

cnpm i webpack-dev-server@2 --save-dev

这里使用2的版本。
命令行运行 webpack-dev-server

浏览器输入http://localhost:8080/ 就能访问刚刚的页面。
加上–open参数 ，就可以自动打开浏览器。

8 、插件的使用

先下载两个插件

cnpm i html-webpack-plugin clean-webpack-plugin --save-dev

html-webpack-plugin 根据模板html文件生成引入JS的文件
clean-webpack-plugin 清除dist文件夹

在webpack.config.js中引用并使用他们

执行webpack命令。