1.安裝
1.創(chuàng)建目錄
mkdir webpack-demo
cd webpack-demo
npm init //創(chuàng)建一個(gè)package.json
2.copy Github上webpack官網(wǎng)的文檔
//安裝webpack
npm install --save-dev webpack
//配置
touch webpack.config.js
vi webpack.config.js
//在里面寫以下內(nèi)容
/*
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};*/
//創(chuàng)建文件
touch src/index.js
//運(yùn)行webpack
npx webpack //這時(shí)會(huì)多出dist目錄尼斧，里面有bundle.js文件
2.使用
1.在index.js里寫
console.log(1)
//再運(yùn)行webpack:
npx webpack
//再看bundle.js鳖轰，這時(shí)會(huì)多出來一行console.log(1)
2.安裝babel-loader自動(dòng)轉(zhuǎn)換es6
//安裝v6，命令行
npm install babel-loader babel-core babel-preset-env webpack
//將這個(gè)復(fù)制到webpack的配置文件webpack.config.js里缓艳，加在output的下面
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
//加在output的下面，復(fù)制完后成這樣
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
};
運(yùn)行npx webpack
若出現(xiàn)can't find '...'或can't resolve '...'的報(bào)錯(cuò)，則安裝省略號(hào)里的東西npm i '省略號(hào)'
注意：若是Couldn't find preset "env"，不要安裝env佳遂，而是npm i babel-preset-env
3.使用babel
//當(dāng)你在寫index.js里寫
let a=1
//它就會(huì)幫你自動(dòng)轉(zhuǎn)換成es5了
