webpack学习
安装node
安装webpack
# 创建一个目录并进入目录
mkdir webpack-demo
cd webpack-demo
# 初始化npm环境配置
npm init -y
# 安装webpack和webpack-cli
npm install --save-dev webpack webpack-cli
或
npm i -D webpack webpack-cli
# 在项目创建src目录并创建index.html index.js index.css 文件
mkdir src
tource index.html# 在index.js文件中
cat > index.js << EOF
import "./index.css"
console.log("hello world")
EOF
配置webpack.config.js
# 安装html-webpack-plugin
npm install --save-dev html-webpack-plugin
# 安装css-loader style-loader
npm install --save-dev css-loader
# 创建webpack.config.js文件
vim webpack.config.js
# 内容如下
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')module.exports = {mode: 'development',entry: './src/index.js',output: {path: __dirname + '/dist',filename: 'main .js'},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']}]},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, 'src/index.html')})]
}# 在package.json文件的script选项中添加"build": "webpack --config webpack.config.js", 格式如下{"name": "webpack-demo","version": "1.0.0","main": "index.js","scripts": {"build": "webpack --config webpack.config.js","test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","description": "","devDependencies": {"css-loader": "^7.1.2","html-webpack-plugin": "^5.6.4","style-loader": "^4.0.0","webpack": "^5.101.3","webpack-cli": "^6.0.1"}
}# 执行webpack打包命令
npm run build
