webpack建立一个项目

在一个项目先复制全局的webpack、webpack-dev-server

webpack

webpack.cmd

webpack-dev-server

webpack-dev-server.cmd

 第一步骤：

假如我要把webpack安装到myapp这个文件夹下，就要输入一下命令

 

cd  myapp         #进入myapp文件夹
npm init           #创建package.json文件，这个文件记录了一些项目的名称版本和一些依赖
npm install webpack --save-dev    #安装 webpack 依赖到本地项目中

安装成后package.json文件打开应该是类似这个结构，就说明安装成功了

 

{
  "name": "etc",
  "version": "1.0.0",
  "description": "this is my first",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "w"
  ],
  "author": "chenguiya",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  }
}

安装webpack开发工具，简单来说，webpack-dev-server就是一个小型的静态文件服务器。使用它，可以为webpack打包生成的资源文件提供Web服务。

npm install webpack-dev-server --save-dev     #安装webpack-dev-server到本地项目

第二步骤：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>kerwintest</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <!-- <link rel="stylesheet" type="text/css" href=""> -->
  </head>
  <body>
    <div id="box"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

然后创建一个入口文件main.js，名字可以随便起

document.write('<h1>Hello World</h1>');

最后创建配置文件webpack.config.js,webpack要配置的信息都会保存在这个文件

module.exports = {
  entry: './main.js',      //入口文件
  output: {
    filename: 'bundle.js'  //打包之后的保存的文件
  }
};

文件创建完后在命令行执行webpack-dev-server    然后打开http://localhost:8080/就能看到效果了

安装完webpack-dev-server后在命令行执行  webpack-dev-server    然后打开浏览器http://localhost:8080/ 就可以看到效果了。修改代码后直接刷新浏览器就可以看到效果

 

 第二步骤：

多个入口文件是可以的，在多页面应用中是有用的

 1.创建2个入口文件main1.js和main2.js

// main1.js
document.write('<h1>Hello World</h1>');

// main2.js
document.write('<h2>Hello Webpack</h2>');

2.创建index.html

 

<html>
  <body>
    <script src="bundle1.js"></script>
    <script src="bundle2.js"></script>
  </body>
</html>

3.创建配置文件webpack.config.js

module.exports = {
  entry: {
    bundle1: './main1.js',
    bundle2: './main2.js'
  },
  output: {
    filename: '[name].js'  #output中的[name]对应于entry中的key值，生成后的文件名是bundle1.js和bundle2.js。 }
};

文件创建完后在命令行执行webpack-dev-server    然后打开http://localhost:8080/就能看到效果了，如下图：

 

posted @ 2018-01-31 14:35  chenguiya  阅读(211)  评论(0)    收藏  举报