cd 项目文件夹
npm init -y
npm install jquery -S //生成node_modules 下载好jquery
创建webpack.config.js
module.exports = {
entry: path.join(__dirname, './src/main.js'), //入口文件
output:{ //输出文件相关配置
path: path.join(__dirname, './dist'),
filename: 'bundle.js' //指定输出文件名称
}，
mode: 'development'
}
npm install webpack -D 本地安装一下
npm install webpack-dev-server -D 本地安装webpack-dev-server
npm install webpack-cli -D
配置
"dev": "webpack-dev-server --mode development --open --port 3000 --contentBase src --hot", //--open 自动打开浏览器 --port 3000 端口号3000 --contentBase src 修改默认打开目录 --hot热重载
"build": "webpack-dev-server --mode production"
//注意 model.exports 里 mode: 'developoment' 是否加上去
（htmlwebpackplugin）插件自动在内存中根据制定页面生成一个内存页面 自动把打包好的bundle.js追加到页面
npm install html-webpack-plugin -D
webpack.config.js 中追加
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
.
.
plugins: [
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html' //设置生成的内存页面名称 不是在磁盘 自动追加引用src
})
]
}
import './css/index.css'
// 如果需要处理css文件 需要安装npm install style-loader css-loader -D
// 打开webpack.conf.js 这个配置文件 在里面新增一个配置节点 叫做module 他是一个对象 有个rules 数组 存放了所有第三方文件匹配处理规则
module: {
rules: [
{
test: /\.css$/, use: ['style-loader','css-loader'] //test 正则匹配 /\.css$/ $结尾 .需要转义 类似replace(/好人/g,坏人) 匹配所有好人替换成坏人
}
]
}
import './css/index.less'
npm install less-loader -D
npm install less
module: {
rules: [
{
test: /\.css$/, use: ['style-loader','css-loader'],
},
{
test: /\.less$/, use: ['style-loader','css-loader','less-loader']
}
]
}