当前位置： 移动技术网 > IT编程>网页制作>CSS > Webpack4.x安装与使用入门教程

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

2018年04月14日  | 移动技术网IT编程  | 我要评论

安装

在全局安装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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网