欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Webpack4.x安装与使用入门教程

程序员文章站 2022-03-30 16:41:00
安装 在全局安装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。

并分别创建以下文件。

Webpack4.x安装与使用入门教程

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

上一篇： We discovered one or more bugs in your app when reviewed on iPhone and iPad running iOS 14.1 and 14.

下一篇： [.NET] 浅谈可扩展性框架：MEF

推荐阅读