webpack最佳入门实践系列(2)

3.插件

在前端迅速发展的今天，许多没有太多技术含量并且感觉是在浪费时间的事情，就可以交给构建工具来做，例如：我们去手动创建index.html,手动引入打包好的js文件等操作，都可以叫个webpack来做，帮助我们提升效率，因此，你只需要理解，插件其实就是webpack的一些扩展功能，旨在帮助我们提示效率的工具

3.1.html-webpack-plugin插件

这个插件就是帮我们自动生成html文件并且自动引入打包好的js文件

1.插件安装

npm install html-webpack-plugin --save-dev

　　

2.修改webpack配置，让插件生效

const path = require('path')
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    plugins: [
        //添加插件
        new HtmlWebpackPlugin()
    ]
}

　　

3.运行查看效果

npm run dev

　　

4.其他常用配置项目

const path = require('path')
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    plugins: [
        //添加插件
        new HtmlWebpackPlugin(
            //在这个插件内部，可以指定模版和自定义生成的文件名
            {
                filename: 'main.html',
                template: 'src/index.html'
            }
        )
    ]
}

　　

有了上面两个配置后，这个插件帮助生成一个main.html，并且是基于template生成的

4.devserver

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

4.1.安装webpack-dev-server

npm install webpack-dev-server --save-dev

　　

修改package.json配置文件，在script选项中加入下面代码：

"start": "webpack-dev-server",

　　

整个package.json配置文件如下：

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "./node_modules/webpack/bin/webpack.js",
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.10.0"
  }
}

　　

在终端运行命令：

npm start

　　

命令启动后，通过http://localhost:8080/ 访问

4.2.让工具自动给我们打开服务器地址

在webpack.config.js中添加配置

devServer:{
    open: true
}

　　

其中open:true 表示自动打开浏览器

4.3.修改服务器端口

在webpack.config.js中添加配置项目

devServer:{
    open: true,
    port: 8090
}

　　

其中port后面给一个自定义端口

4.4.设置默认访问目录

devServer:{
    open: true,
    port: 8090,
    contentBase: './dist'
}

5.loader

5.1.什么是loader？

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块。

在更高层面，在 webpack 的配置中 loader 有两个目标。

1. 识别出应该被对应的 loader 进行转换的那些文件。(使用 test 属性)
2. 转换这些文件，从而使其能够被添加到依赖图中（并且最终添加到 bundle 中）(use 属性)

总结：有了loader，webpack就会把非js文件也看成是模块，并且可以引用它

5.2.支持css文件打包

安装css-loader

npm install css-loader --save-dev

　　

修改webpack.config.js文件，添加css-loader配置项

module:{
        rules: [
           {
               test: /\.css$/,
               use: ['css-loader']
           }
        ]
    }

　　

完整webpack.config.js文件：

const path = require("path")

const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html'
        })
    ],
    devServer:{
        open: true,
        contentBase: './dist'
    },
    module:{
        rules: [
           {
               test: /\.css$/,
               use: ['css-loader']
           }
        ]
    }

}

　　

配置完成后，测试是否生效，首先新建index.css，添加内容：

body{
    background: #009f95
}

　　

在index.js文件中引入 index.css文件

import module_1 from './module_1'
import module_2 from './module_2'
import module_3 from './module_3'

document.write("hello world")
import "./index.css"

module_1()
module_2()
module_3()

　　

运行命令，查看效果：

npm start

　　

此时，发现并没有任何效果，原因是css-loader只负责把css文件打包到js中，并没有加入到index.html结构中， 还需要引入style-loader来处理，让style样式加入到index.html结构中

npm install style-loader --save-dev

　　

接下来，需要把style-loader配置到webpack.config.js文件中

module:{
        rules: [
           {
               test: /\.css$/,
               use: ['style-loader','css-loader']
           }
        ]
 }

　　

再次运行 npm start 查看效果