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 查看效果
webpack最佳入門實踐系列(2)