webpack入门之简单例子跑起来

时间 2019-11-20

标签 webpack 入门简单例子起来繁體版

原文原文链接

webpack介绍

　　Webpack是当下最热门的前端资源模块化管理和打包工具，它能够将不少松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还能够将按需加载的模块进行代码分割，等到实际须要的时候再异步加载。css

webpack和Grunt以及Gulp相比有什么特性

Gulp/Grunt是一种可以优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优势使得Webpack能够替代Gulp/Grunt类的工具。html

Grunt和Gulp的工做方式是：在一个配置文件中，指明对某些文件进行相似编译、组合、压缩等任务的具体步骤。前端

webpack的工做方式是：把你的项目当作一个总体，经过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的全部依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。react

两者进行比较，Webpack的处理速度更快更直接，能打包更多不一样类型的文件。webpack

开始使用webpack

Node.js是必备的工具，NPM的版本最好是3.x版本以上，NPM 3.x提供了更有效的包依赖管理。git

webpack用npm安装。web

//全局安装
npm install  webpack -g
//安装到你的项目目录
npm install  webpack --save-dev

1.新建一个文件夹wkdemo，在该文件下 npm install webpack --save-devnpm

(看得出来应该先建一个package.json文件的(/ □ \)）json

2.package.json文件准备，能够使用npm init命令自动建立这个package.json文件浏览器

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "webpack demo",
  "main": "app.js",
  "scripts": {
    "start": "webpack",
    "build": "webpack --progress --colors"
  },
  "repository": {
    "type": "git",
    "url": ".."
  },
  "keywords": [
    "react",
    "webpack"
  ],
  "author": "wangjuan",
  "devDependencies": {
    "babel-core": "^5.8.25",
    "babel-loader": "^5.3.2",
    "css-loader": "^0.12.1",
  },
  "dependencies": {
  },
  "license": "ISC"
}

View Code

3.webpack.config.js文件准备

var webpack = require('webpack');
module.exports = {
    //页面入口文件配置
    entry: [
      // 'webpack/hot/only-dev-server',
      "./js/app.js"
    ],
    //入口文件输出配置
    output: {
        path: './build',
        filename: "bundle.js"
    },
    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },

            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    //插件项
    plugins: [
      new webpack.NoErrorsPlugin()
    ]
};

View Code

4.index.html最基础的html代码，它惟一的目的就是加载打包后的js文件（bundle.js），注意路径对应起来

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>New webpack app</title>

  </head>
  <body>
    <div id='root'></div>
    <script src="build/bundle.js"></script>
  </body>
</html>

View Code

由webpack.config.js文件中：

//页面入口文件配置
    entry: [
      // 'webpack/hot/only-dev-server',
      "./js/app.js"
    ],

能够看出须要建一个文件js/app.js做为入口文件。

5.入口文件app.js准备

//app.js
var greeter = require('./hello.js');
document.getElementById('root').appendChild(greeter());

能够看到这里引用一个同目录下hello.js文件

6.hello.js文件准备

// hello.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings! hello world12345";
  return greet;
};

7.执行webpack

8.运行index.html

最后看下目录结构为：

参考：

入门Webpack，看这篇就够了

http://www.cnblogs.com/skylar/p/React-Webpack-ES6.html

http://www.cnblogs.com/vajoy/p/4650467.html

http://www.cnblogs.com/tugenhua0707/p/5576262.html

http://www.cnblogs.com/keepfool/p/5678427.html