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 有两个目标。
- 识别出应该被对应的 loader 进行转换的那些文件。(使用 test 属性)
- 转换这些文件，从而使其能够被添加到依赖图中（并且最终添加到 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 查看效果
