Setcina（目前还在更新以及完善中...）

03环境搭建以及配置

2019-04-10

正式使用Webpack前的准备

  • 1.创建文件夹webpack-api-text
  • 2.在终端cd webpack-api-text –> npm init

    这样可以再文件夹中创建一个package.json文件，这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等

输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，回车默认即可。

安装依赖的模块，我们现在可以把之前装的模块，webpack，webpack-cli以及webpack-dev-server安装好

1
npm install webpack webpack-cli webpack-dev-server

webpack-course下面建立文件夹，config，dist，src，

  • 1.config下c创建 webpack.dev.js
  • 2.dist下创建 index.html
  • 3.src下创建 main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//在webpack.dev.js下写入以下代码

const path = require('path')
module.exports = {
  //入口：有并且可以有多个
  entry: {
    main: ['./src/main.js']
  },
  //打包环境：开发&生产
  mode: "development",
  //出口，有且只能有一个
  output: {
    filename: '[name]-bundle.js',
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/'
  },
  //本地服务器
  devServer: {
    contentBase: 'dist',
    overlay: true,
  }
}
1
2
//在main.js中输入
alert("Helo world!!!!")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//在index.html页面上输入
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Webpack Sample Project</title>
</head>

<body>
  <div id='root'>
    <h1>Hello World</h1>
  </div>
</body>
<script src="/main-bundle.js"></script>

</html>

在终端使用webpack-dev-server –config=config/webpack.dev.js

这样就会开启web服务，我们从
locallhost:8080端口访问的话，就会出现Hello World以及弹窗Helo world!!!!

Tags: WebPack
← 02安装Webpack以及相应的模块 04加载css以及配置package.json →

扫描二维码，分享此文章