目錄
(一) 其他
準備工作安裝webpack
(二) webpack配置單入口文件配置多入口配置 準備工作
下載安裝node模塊,用npm配置淘寶鏡像webpack是什么
webpack是一個js的打包工具,可以進行很多自動化的工作,比如壓縮,提取公共模塊,把小圖片變成base64格式webpack是怎么打包的: - 尋找入口
- 把相關東西全部打包成一個文件(一個包),并且它會記住這些東西的位置
webpack特點
萬物皆模塊相關知識
安裝webpack
執行以下命令
// 全局安裝webpack
npm i webpack -g
npm i webpack-cli -g
webpack -v
// 出現版本號表示安裝成功
demo1 單入口文件配置
npm init 初始化package.json創建一個文件main.jsconsole.log('main.js');
創建webpack的配置文件 webpack.config.js配置webpack// 加載node原有模塊path
const path = require('path');// 導出webpack的配置module.exports = {// 配置入口entry: './main.js',// 配置輸出output: {// 配置輸出路徑, 意思是輸出到當前目錄的dist文件夾path: path.resolve(__dirname, 'dist'),// 配置輸出的包名filename: 'bundle.js'},// 配置環境: 開發環境和生產環境mode: 'development'
}
執行命令 webpack
多入口配置
npm init 初始化package.json創建兩個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'),// 配置輸出文件名,同時添加hashfilename: 'bundle-[name]-[hash:5].js'},mode: 'development'
}
運行 webpack 命令 配置css-loader
npm init創建app.cssbody {background: gray;}
創建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: {// 配置規則rules: [// 配置css相關的loader,下面的配置是告訴webpack,當在打包過程中,// 若遇到以.css結尾的文件,就用style-loader和css-loader處理一下再加載{test: /\.css$/,use: ['style-loader','css-loader']}// 配置其他的loader]}
}
運行webpack命令 安裝less-loader
npm init創建app.lessbody {background: gray;.title {background: green;color: #fff;font-size: 30px;}
}
創建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
在當前目錄運行 webpack命令檢驗,創建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>
如果頁面樣式生效,說明配置是成功的.
配置server(修改了代碼實時更新)
npm init創建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
運行命令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,// 端口號port: 9000,// 配置熱更新hot: true}
}
配置快捷啟動方式
在package.json的 "scripts"里面加上下面這一句"dev": "webpack-dev-server --open --inline"
然后使用 npm run dev 開啟動服務
總結
以上是生活随笔為你收集整理的webpack教程(一)的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
