關(guān)于webpack有啥用印蔬，就不說了狼荞，直接入門派哲。記錄下如何操作webpack偎血。
首先來一個(gè)package.json文件
npm init -y得到package.json配置文件
安裝
文檔中是：
npm install webpack webpack-cli --save-dev
我全部用的 sudo cnpm安裝下邊所有的依賴
一、第一次嘗試
創(chuàng)建
創(chuàng)建目錄與文件
dist
>index.html
src
>index.js
設(shè)置index.html為：
<!doctype html>
<html>
<head>
<title>webpack-demo</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
設(shè)置index.js為：
（這里的inex.js實(shí)際上就是我們雕沉，整個(gè)項(xiàng)目的入口文件集乔，待會(huì)看的比較清楚）
function component() {
var element = document.createElement('div');
element.innerHTML = 'hello webpack'
return element
}
document.body.appendChild(component())
運(yùn)行
npx webpack運(yùn)行，發(fā)現(xiàn)dist目錄下坡椒，生成一個(gè)main.js文件扰路，我們?cè)赿ist目錄下，啟動(dòng)http-server倔叼，是可以正常訪問的汗唱。
使用配置文件來解決這個(gè)問題：
在根目錄下創(chuàng)建webpack.config.js
看到入口以及出口，我們添加mode
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
現(xiàn)在如看main.js丈攒，還能看一點(diǎn)～
二哩罪、使用scss
當(dāng)然是使用sass-loader
來一個(gè)scss文件
我們?cè)趕rc目錄下創(chuàng)建style.scss
div {
width: 600px;
height: 300px;
margin: 0 auto;
background: rosybrown;
>span {
display: inline-block;
padding: 20px;
}
}
安裝sass-loader
不過需要提前安裝style-loader css-loader
npm install sass-loader node-sass webpack --save-dev
設(shè)置
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader" // 將 JS 字符串生成為 style 節(jié)點(diǎn)
}, {
loader: "css-loader" // 將 CSS 轉(zhuǎn)化成 CommonJS 模塊
}, {
loader: "sass-loader" // 將 Sass 編譯成 CSS
}]
}]
}
};
運(yùn)行
就可以了～style就插入到head中了
三、使用ES6
ES6巡验，在一些地方還不支持际插，我們需要使用babel將其轉(zhuǎn)化為ES5。當(dāng)然是使用babel-loader
來一點(diǎn)es6
我們?cè)趇ndex.js中显设，將var 換為let框弛，添加
console.log([1,2,3].map(x => x * x))
安裝babel-loader
npm install -D babel-loader @babel/core @babel/preset-env webpack
使用
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
運(yùn)行
運(yùn)行發(fā)現(xiàn)，實(shí)際上捕捂，已經(jīng)將es6的語法轉(zhuǎn)化為es5
四瑟枫、圖片
使用file-loader
安裝
npm install --save-dev file-loader
引入
在index.js引入
import img from './google.png'
創(chuàng)建img標(biāo)簽
let elementImg = document.createElement('img')
elementImg.src = img
elementDiv.appendChild(elementImg)
配置
在webpack.config.js的rules中添加配置
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
