最开始打开vscode,先初始化 npm init -y
然后开始安装。
webpack 使用
安装模块
npm i webpack -g //webpack打包工具 (最好的是全局安装)
npm i webpack-cli -S (本地安装)
npm i babel-loader -S //babel-loader (本地安装)
npm i @babel/preset-env -S // 转码规则 (本地安装)
npm i @babel/core -S //babel api (本地安装)
npm i "@babel/preset-env" "@babel/core" babel-loader webpack webpack-cli -S
配置文件webpack.config.js
var path = require('path');
module.exports = {
//文件入口
entry: './src/index.js',
//文件出口
output: {
path: path.join(__dirname, 'dist'), //打包后的路径
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader'
//打包除这个文件之外的文件
exclude: path.resolve(__dirname, "node_modules"),
//打包包括的文件
include: path.resolve(__dirname, "src")
// options: {
// 'presets': ['es2015']
// }
}
]
}
}
执行webpack打包命令
方式一
webpack --mode prodcution
或
webpack --mode development
方式二
//package.json文件配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development"
},
//npm run dev 执行打包
css-Loader使用
安装模块
npm i css-loader style-loader -S
配置webpack.config.js
var path = require('path');
module.exports = {
devtool: 'eval-source-map',
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'main.js'
},
module: {
rules: [{
test: '/\.js$/',
loader: 'babel-loader',
//打包除这个文件之外的文件
exclude: path.resolve(__dirname, "node_modules"),
//打包包括的文件
include: path.resolve(__dirname, "src")
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
}
}
好了,今天的分享就到此结束了。