Webpack4.x安装与使用入门教程
程序员文章站
2022-07-07 23:45:09
安装
在全局安装webpack
npm install -g webpack
创建项目
创建新文件夹webpack-study，用于存放项目。命令行定位到该文件夹下。输...
安装
在全局安装webpack
npm install -g webpack
创建项目
创建新文件夹webpack-study，用于存放项目。命令行定位到该文件夹下。输入以下命令进行初始化。
npm init
然后根据项目情况配置选项或直接回车。
此时发现在该文件夹内新增了一个package.json文件。
安装webpack依赖包
npm install --save-dev webpack此时多了node_modules文件夹。
在webpack-study文件夹下创建两个文件夹，app和public。
并分别创建以下文件。
module.exports = function() {
let greet = document.createElement('p');
greet.textContent = 'Hi winnw!';
return greet;
}
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8">
<title>my first webpack</title>
</head>
<body>
<p id="root">
hello world!
</p>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
创建webpack.config.js
// __dirname是node.js的全局变量，它指向当前执行脚本所在的目录。
module. exports ={
devtool: 'eval-source-map',
entry:__dirname + '/app/main.js',
output:{
path:__dirname+'/public',
filename:'bundle.js'
},
mode:'development',
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
} /*,
module:{
loaders:[
{
test:/\.css$/,
loaders:['style-loader','css-loader']
}
]
}*/
}
打包
webpack
低版本的webpack可能可以成功，但我的版本是4.x，提示以下信息：
The CLI moved into a separate package:webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. ->when using npm: npm install webpack-cli -D ->when using yarn: yarn add webpack-cli -D由于我们的webpack是安装在全局，因此webpack-cli也装到全局。
npm install -g webpack-cli继续执行webpack，成功！
可在public文件夹下看到buddle.js