目錄
(一) 其他
準(zhǔn)備工作安裝webpack
(二) webpack配置單入口文件配置多入口配置 準(zhǔn)備工作
下載安裝node模塊,用npm配置淘寶鏡像webpack是什么
webpack是一個(gè)js的打包工具,可以進(jìn)行很多自動(dòng)化的工作,比如壓縮,提取公共模塊,把小圖片變成base64格式webpack是怎么打包的: - 尋找入口
- 把相關(guān)東西全部打包成一個(gè)文件(一個(gè)包),并且它會(huì)記住這些東西的位置
webpack特點(diǎn)
萬物皆模塊相關(guān)知識(shí)
安裝webpack
執(zhí)行以下命令
// 全局安裝webpack
npm i webpack -g
npm i webpack-cli -g
webpack -v
// 出現(xiàn)版本號(hào)表示安裝成功
demo1 單入口文件配置
npm init 初始化package.json創(chuàng)建一個(gè)文件main.jsconsole.log('main.js');
創(chuàng)建webpack的配置文件 webpack.config.js配置webpack// 加載node原有模塊path
const path = require('path');// 導(dǎo)出webpack的配置module.exports = {// 配置入口entry: './main.js',// 配置輸出output: {// 配置輸出路徑, 意思是輸出到當(dāng)前目錄的dist文件夾path: path.resolve(__dirname, 'dist'),// 配置輸出的包名filename: 'bundle.js'},// 配置環(huán)境: 開發(fā)環(huán)境和生產(chǎn)環(huán)境mode: 'development'
}
執(zhí)行命令 webpack
多入口配置
npm init 初始化package.json創(chuàng)建兩個(gè)js,main1.js,main2.js// main1.js
console.log('main1.js');
// main2.js
console.log('main2.js');
配置webpackconst path = require('path');
module.exports = {// 配置入口entry: {main1: './main1.js',main2: './main2.js'},output: {path: path.resolve(__dirname, 'dist'),// 配置輸出文件名,同時(shí)添加hashfilename: 'bundle-[name]-[hash:5].js'},mode: 'development'
}
運(yùn)行 webpack 命令 配置css-loader
npm init創(chuàng)建app.cssbody {background: gray;}
創(chuàng)建main.jsrequire('./app.css');
// 其他的代碼
配置webpack,配置里用到style-loader和css-loader,需要先安裝npm i style-loader css-loader --save-dev
const path = require('path');module.exports = {entry: './main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'},// 配置module: {// 配置規(guī)則rules: [// 配置css相關(guān)的loader,下面的配置是告訴webpack,當(dāng)在打包過程中,// 若遇到以.css結(jié)尾的文件,就用style-loader和css-loader處理一下再加載{test: /\.css$/,use: ['style-loader','css-loader']}// 配置其他的loader]}
}
運(yùn)行webpack命令 安裝less-loader
npm init創(chuàng)建app.lessbody {background: gray;.title {background: green;color: #fff;font-size: 30px;}
}
創(chuàng)建main.jsrequire('./app.less');
配置webpackconst path = require('path');module.exports = {entry: './main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'index.js'},mode: 'development',module: {rules: [{test: /\.less$/,use: [{loader: "style-loader" // creates style nodes from JS strings}, {loader: "css-loader" // translates CSS into CommonJS}, {loader: "less-loader" // compiles Less to CSS}]}]}
}
安裝less,安裝style-loader,css-loader,less-loadernpm i less --save-dev
npm i style-loader css-loader less-loader --save-dev
在當(dāng)前目錄運(yùn)行 webpack命令檢驗(yàn),創(chuàng)建index.html<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div class="title">test less</div><script src="index.js" type="text/javascript" charset="utf-8"></script></body>
</html>
如果頁(yè)面樣式生效,說明配置是成功的.
配置server(修改了代碼實(shí)時(shí)更新)
npm init創(chuàng)建main.jslet div = document.createElement('div');
div.style.background = 'green';
div.style.width = '300px';
div.style.height = '300px';
document.body.appendChild(div);
配置webpackconst path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'index.js'},plugins: [new htmlWebpackPlugin()]}
安裝生成html插件模塊npm i html-webpack-plugin --save -dev
npm i webpack --save-dev
安裝servernpm i webpack-dev-server -g (全局安裝)
npm i webpack-cli --save-dev
運(yùn)行命令webpack-dev-server --open
配置模塊熱更新const webpack = require('webpack');
new webpack.HotModuleReplacementPlugin()
hot: true
最終的webpack配置文件為
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {entry: './main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'index.js'},plugins: [new htmlWebpackPlugin(),// 配置熱更新new webpack.HotModuleReplacementPlugin()],mode: 'development',devServer: {// 根目錄contentBase: path.join(__dirname, "dist"),compress: true,// 端口號(hào)port: 9000,// 配置熱更新hot: true}
}
配置快捷啟動(dòng)方式
在package.json的 "scripts"里面加上下面這一句"dev": "webpack-dev-server --open --inline"
然后使用 npm run dev 開啟動(dòng)服務(wù)
總結(jié)
以上是生活随笔為你收集整理的webpack教程(一)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
