webpack2学习(二)

目录

• 在main.js中操做dom 修改页面内容
• 完善webpack配置文件
  • webpack最重要的功能 - 加载器(Loaders)
  • webpack的插件功能
• 总结

==webpack 最难理解的点是 ‘编译’这个概念==

在main.js中操做dom 修改页面内容

eg

document.getElementById('app').innerHTML = 'hello xxx'

热更新：在工程启动时， 保存main.js, 会发现页面自动更新了，这是webpack-web-server的热更新功能(经过创建一个Websocket链接来实现响应代码的修改)

完善webpack配置文件

webpack最重要的功能 - 加载器(Loaders)

webpack中每一个文件都是一个模块，不一样的模块，须要不一样的加载器来加载， 因此就须要安装不一样的加载器对各类后缀名的文件进行处理。
eg： css样式
安装 style-loader css-loader

yarn add css-loader --save-dev
yarn add style-loader --save-dev

安装后， 在webpack.config.js中配置loader

在module对象的rules属性中去指定一系列的loaders，
每一个loader必须包含test和use两个选项。

// 解释： 当webpack编译过程当中遇到require() 或import语句导入一个后缀为.css的文件时，现将它经过css-loader转换，再经过style-loader转换，而后继续打包
// (use选项的值能够是数组也但是字符串，若是是数组编译顺序为从下至上)
module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }

新建文件style.css，随便写几个样式
将style.css文件引入到main.js中

// 新建文件 打开文件 (固然你也能够手动打开)
touch style.css
open style.css

// style.css
#app {
    font-size: 30px;
    color: lightblue;
}

//main.js
import './style.css'

从新执行yarn run dev

页面会加载你写的样式

webpack的插件功能

插件功能强大 而且能够定制

这里以 extract-text-webpack-plugin的插件为例

• 做用: 把散落在各地的css提取出来，并生成一个main.css文件，最终在index.html里经过link的形式加载它

安装

yarn add extract-text-webpack-plugin --dev

改写配置

module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'style-loader'
                })
            }
        ]
    },
    plugins: [
        //重命名提取后的css文件
        new ExtractTextPlugin("main.css")
    ]

在index.html中经过link添加main.css

<link rel="stylesheet" type="text/css" href="/dist/main.css">

执行

yarn run dev

总结

webpack看似复杂，其实只不过是一个js配置文件
只要弄清楚4个概念：

• 入口 entry
• 出口 output
• 加载器 Loaders
• 插件 Plugins