怎么安装Webpack

安装node.js

首先需要安装Node.js，node自带了包管理工具npm。

安装webpack

使用npm install webpack -g，webpack全局安装到了本地环境中，就可以使用webpack命令了。

在项目中使用webpack

  • 通过npm init实例化package.json文件。
  • 通过npm install webpack --save-dev安装webpack到package.json文件中。
  • 或者通过npm install webpack@1.2.x --save-dev安装指定版本的webpack到package.json文件中。
  • 通过npm install webpack-dev-server --save-dev安装dev tools到package.json文件中，本地运行webpack服务。

怎么使用Webpack

1、安装webpack后，可以使用webpack这个命令行工具。主要命令：webpack <entry> <output>。可以切换到包含webpack.config.js的目录运行命令：

  • webpack 执行一次开发时的编译
  • webpack -p 执行一次生成环境的编译（压缩）
  • webpack --watch 在开发时持续监控增量编译（很快）
  • webpack -d 让他生成SourceMaps
  • webpack --progress 显示编译进度
  • webpack --colors 显示静态资源的颜色
  • webpack --sort-modules-by, --sort-chunks-by, --sort-assets-by 将modules/chunks/assets进行列表排序
  • webpack --display-chunks 展示编译后的分块
  • webpack --display-reasons 显示更多引用模块原因
  • webapck --display-error-details 显示更多报错信息

2、每个项目下都必须配置有一个 webpack.config.js，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。

1、第一个项目demo01，首先建一个文件夹demo01，下面包含一个index.html,main.js,webpack.config.js

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<script type="text/javascript" src="bundle.js"></script>

</body>

</html>

　　main.js

document.write('welcome to webpack world!!')

webpack.config.js

module.exports ={

    entry:'./main',        //这个表示的程序执行的入口，

    output:{

        filename:'bundle.js'//这个表示的程序的出口。

    }

}

　　然后我们运行命令webpack-dev-server,在去访问localhost:8080就可以看到'welcome to webpack world!'这句话，整体是将main.js文件打包成bundle.js文件，然后在main.js文件中引用bundle.js

2、demo02中含有一个index.html,main1.js,main2.js ,bundle2.js,webpack.config.js

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<script src="bundle2.js" type="text/javascript"></script>

</body>

</html>

main1.js

function creatObj(){

    var div1 = document.createElement('div');

    div1.innerHTML = 'this is a create div!'

    return div1;

}

module.exports = creatObj

main2.js

var main1 = require('./main1.js');

document.write(main1().innerHTML);

webpack.config.js

module.exports = {

    entry:{

     bundle2:'./main1.js',

     bundle2:'./main2.js'

    },

    output:{

        filename:'bundle2.js'

    }

}

demo03

// main1.js

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

// main2.js

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

index.html

<html>

  <body>

    <script src="bundle1.js"></script>

    <script src="bundle2.js"></script>

  </body>

</html>

webpack.config.js

module.exports = {

  entry: {

    bundle1: './main1.js',

    bundle2: './main2.js'

  },

  output: {

    filename: '[name].js'

  }

};

demo04

安装jsx解析器

首先这个文件中包含index.html , main.jsx ,webpack.config.js

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div id="wrapper"></div>

<script src="bundle.js" type="text/javascript"></script>

</body>

</html>

main.jsx

const React = require('react');

const ReactDOM = require('react-dom');

ReactDOM.render(

    <h1>Hello, world,hello webpack!</h1>,

    document.querySelector('#wrapper')

);

webpack.config.js

module.exports = {

    entry:'./main.jsx',

    output:{

        filename:'bundle.js'

    },

    module: {

        loaders:[

            {

                test: /\.js[x]?$/,

                exclude: /node_modules/,

                loader: 'babel-loader?presets[]=es2015&presets[]=react'

            },

        ]

    }

}

这一个模块要好好说说，首先如果要使用react 的话可以在那个jsx文件中引入react，react-dom模块。其次要解析jsx文件必须需要jsx解析器babel，要下相应的babel-loader，jsx-loader，babel-core，babel-preset-es2015，babel-preset-react

所以在使用jsx文件和运用react.js开发组件之前，要先加载一下几个文件

npm install react react-dom babel-loader jsx-loader babel-core  babel-preset-es2015 babel-preset-react  --save-dev

然后再webpack.config.js文件中加入

module: {

        loaders:[

            {

                test: /\.js[x]?$/,

                exclude: /node_modules/,

                loader: 'babel-loader?presets[]=es2015&presets[]=react'

            },

        ]

    }

demo05(webpack中允许你将css文件当一个模块加载到js文件中，但是在这之前你必须安装css-loader,style-loader)

npm install css-loader style-loader --save-dev

然后在webpack.config.js中loaders中加入

 { test: /\.css$/, loader: 'style-loader!css-loader' }

就可以了

demo05中结合第四个项目：index.html ,main.css  ,compont_first.js  ,webpack.config.js

indx.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div id="main"></div>

<script src="bundle.js" type="text/javascript"></script>

</body>

</html>

main.css

.div1{

    width:500px;

    height:500px;

    background-color:blue;

}

compont_first.js

 var React = require('react');

var ReactDOM = require('react-dom')

var Main = require('./main.css');

var FirstComponent =React.createClass({

    render:function(){

        return <div className='div1'>这个用react创造出来的div</div>

    }

});

module.exports= FirstComponent;

main.js

var FirstComponent = require('./compont_first');

var React = require('react');

var ReactDOM = require('react-dom')

ReactDOM.render(<FirstComponent/>,document.getElementById('main'))//这一句话的使用要使用react-dom模块

webpack.config.js

module.exports ={

    entry:'./main.js',

    output:{

        filename:'bundle.js'

    },

    module: {

        loaders:[

            {

                test: /\.js[x]?$/,

                exclude: /node_modules/,

                loader: 'babel-loader?presets[]=es2015&presets[]=react'

            },

            { test: /\.css$/, loader: 'style-loader!css-loader' }

        ]

    }

}

整体就是这样的.

demo06(关于图片loader，如果想将图片直接require进去到js文件中去，必须先加载url-loader）

npm install url-loader --save-dev

然后再webpack.config.js文件中添加

 { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }

demo06文件中含img文件夹(文件夹下面放了1.jpg)，index.html ,compont_first.js ,main.js main.css ,webpack.config.js

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div id="main"></div>

<script src="bundle.js" type="text/javascript"></script>

</body>

</html>

compont_first.js

 var React = require('react');

var ReactDOM = require('react-dom')

var Main = require('./main.css');

var img = require('./img/1.jpg');//将图片加载进来

var FirstComponent =React.createClass({

    render:function(){

        return <div className='div1'>

        <img src={img}/>

        </div>

    }

});

module.exports= FirstComponent;

main.css

.div1{

    width:500px;

    height:500px;

}

.div1 img {

    width:400px;

}

main.js

var FirstComponent = require('./compont_first');

var React = require('react');

var ReactDOM = require('react-dom')

ReactDOM.render(<FirstComponent/>,document.getElementById('main'))

webpack.config.js

module.exports ={

    entry:'./main.js',

    output:{

        filename:'bundle.js'

    },

    module: {

        loaders:[

            {

                test: /\.js[x]?$/,

                exclude: /node_modules/,

                loader: 'babel-loader?presets[]=es2015&presets[]=react'

            },

            { test: /\.css$/, loader: 'style-loader!css-loader' },

            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }//增加的部分

        ]

    }

}

全局css样式和module内css样式

demo07中包含一个index.html , main.js  ,main.css ,webpack.config.js

什么叫全局css样式？什么叫module内css样式？

全局css样式就是指的是该样式在工程任何地方都可以用(前提要引进来了)

module内的css样式表示的是只有在引入这个css模块的文件中使用，有效

具体解释看下面

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<h1 class="h1">Hello World</h1>//这里也添加了两个元素

<h2 class="h2">Hello Webpack</h2>

<div id="div1"></div>

<script src="bundle.js" type="text/javascript"></script>

</body>

</html>

main.css

.h1{

    color:blue;

}

:global(.h2) {          //这里要注意

    color: green;

}

main.js

var React = require('react');

var ReactDOM = require('react-dom');

var Main = require('./main.css')

var First_Compont =React.createClass({

    render:function(){

        return <div>

            <h1 className={Main.h1}>blue!!</h1>

            <h2 className ='h2'>green!!</h2>

            </div>

    }

});

ReactDOM.render(<First_Compont/>,document.getElementById('div1'))

webpack.config.js

module.exports ={

    entry:'./main.js',

    output:{

        filename:'bundle.js'

    },

    module: {

        loaders:[

            {

                test: /\.js[x]?$/,

                exclude: /node_modules/,

                loader: 'babel-loader?presets[]=es2015&presets[]=react'

            },

            { test: /\.css$/, loader: 'style-loader!css-loader?modules' },//注意在这后面加上了?modules

            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }

        ]

    }

}

首先，我们要在module中的css-loader后面加上?modules  ,其次如果要想让某个css样式变成全局的话，就要:global(.h2){...} 使用，然后使用这个样式时，直接

className='h2'(react中)或者class ='h2'(index.html中),如果在react中这样使用(className={Main.h2})将不生效，因为这个样式不是Main这个模块中的了(但是由于main.css被加载到main.js,然后被编译到bundle.js中，最后被引入到index.html中,所以在index.html可以使用。

其次，在main.css中.h1{..}没有将他变为全局的，所以只能在直接引入他的文件中使用（main.js)不能再index.html中使用。

webpack中的插件系统，如何在webpack中使用插件方法，首先加载这个插件，其次在webpack.config.js中加上下面这句话

plugins: [

    这里面放插件信息

  ]

首先压缩插件

由于压缩插件在webpack中就有，所以

webpack.config.js

var webpack = require('webpack');//首先引入webpack

var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;//其次加载插件

module.exports = {

  entry: './main.js',

  output: {

    filename: 'bundle.js'

  },

  plugins: [

    new uglifyJsPlugin({     //插件声明

      compress: {

        warnings: false

      }

    })

  ]

}

还有一个创建html和自动打开browser的插件，这个时候不需要写index.html文件了

main.js

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

　　webpack.config.js

var HtmlwebpackPlugin = require('html-webpack-plugin');

var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {

  entry: './main.js',

  output: {

    filename: 'bundle.js'

  },

  plugins: [

    new HtmlwebpackPlugin({

      title: 'Webpack-demos',

      filename: 'index.html'

    }),

    new OpenBrowserPlugin({

      url: 'http://localhost:8080'

    })

  ]

};

　　这个地方要先加载两个插件

npm install html-webpack-plugin --save-dev

npm install open-browser-webpack-plugin --save-dev

plugins: [
  new HtmlwebpackPlugin({
    title: 'Webpack-demos',
    filename: 'index.html'
}),
  new OpenBrowserPlugin({
    url: 'http://localhost:8080'
})
]

demo12  提取公共的部分到某一个js中（init.js)
首先看下面代码
index.html
<html>

  <body>

    <div id="a"></div>

    <div id="b"></div>

    <script src="init.js"></script>

    <script src="bundle1.js"></script>

    <script src="bundle2.js"></script>

  </body>

</html>


main1.js




var React = require('react');

var ReactDOM = require('react-dom');

ReactDOM.render(

  <h1>Hello World</h1>,

  document.getElementById('a')

);




main2.js




var React = require('react');

var ReactDOM = require('react-dom');

ReactDOM.render(

  <h2>Hello Webpack</h2>,

  document.getElementById('b')

);




webpack.config.js




var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {

  entry: {

    bundle1: './main1.jsx',

    bundle2: './main2.jsx'

  },

  output: {

    filename: '[name].js'

  },

  module: {

    loaders:[

      { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },

    ]

  },

  plugins: [

    new CommonsChunkPlugin('init.js')

  ]

}




这时候主要引入的是一个插件CommonsChunkPlugin这个插件。


demo13如何在程序中运用jquery呢？


首先要先加载jquery(npm install jquery --save-dev)


其次在需要使用的js文件中require进来


index.html




<html>

  <body>

    <h1></h1>

     <script src="bundle.js"></script>

  </body>

</html>




main.js




var $ = require('jquery');

$('h1').text('Hello World');




webpack.config.js




module.exports = {

  entry:'./main.js',

  output: {

    filename: 'bundle.js'

  },

};




第一步加载jquery程序，第二步在要使用的js文件中引用（main.js）中，这样就可以了。


如何一次性加载，然后不需要在每个需要使用jquery的js文件中都引用jquery？？？？？


只需要要改一下webpack.config.js文件


webpack.config.js




var webpack = require('webpack');

module.exports = {

  entry: {

    app: './main.js'

  },

  output: {

    filename: 'bundle.js'

  },

  plugins: [

    new webpack.ProvidePlugin({

      $: "jquery",

      jQuery: "jquery",

      "window.jQuery": "jquery"

    })

  ]

};




只需要引入jquery插件，然后在里面命名一下就好




 new webpack.ProvidePlugin({

      $: "jquery",

      jQuery: "jquery",

      "window.jQuery": "jquery"

    })




这样在所有的js文件中就不需要在头部引入，可以直接使用( $('h1')或者jQuery（'h1')或者window.jQuery('h1'))。


如何定义全局变量.


demo15


index.html




<html>

  <body>

    <script src="data.js"></script>   //这里面也要引入进来

    <script src="bundle.js"></script>

  </body>

</html>




data.js




var data = 'Hello World hello webbapck';




main.jsx




var data = require('data');   //引入data

var React = require('react');

var ReactDOM = require('react-dom');

ReactDOM.render(

  <h1>{data}</h1>,

  document.body

);




webpack.config.js




module.exports = {

  entry: './main.jsx',

  output: {

    filename: 'bundle.js'

  },

  module: {

    loaders:[

      { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },

    ]

  },

  externals: {      //将data设置为全局变量

    'data': 'data'

  }

};




var data = require('data');
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>{data}</h1>,
  document.body
);
												


											
webpack开发指南1的更多相关文章
	

    
								
  1. Webpack开发指南
		
    前言 成为一个全栈工程师,前端是必不可少的,这位前端构建工具webpack是一门必修的技术. 在学习webpack之前,先熟悉一下npm工具:https://www.runoob.com/nodejs ...
    
		
    2. 
						
  2. 现代前端库开发指南系列（二）：使用 webpack 构建一个库
		
    前言 在前文中,我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学,因此本文在介绍 webpack 配置时,仅提及构建一个库所特有的配置,其余配置请参考 webpack 官方文档. 输 ...
    
		
    3. 
						
  3. Webpack 入门指南 - 1.安装
		
    Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...
    
		
    4. 
						
  4. [转帖]2019 简易Web开发指南
		
    2019 简易Web开发指南     2019年即将到来,各位同学2018年辛苦了. 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的技术 ...
    
		
    5. 
						
  5. ASP.NET Aries 开源开发框架：开发指南（一）
		
    前言: 上周开源了Aries开发框架后,好多朋友都Download了源码,在运行过程里,有一些共性的问题会问到. 所以本篇打算写一下简单的开发指南,照顾一下不是太看的懂源码的同学,同时也会讲解一下框架 ...
    
		
    6. 
						
  6. FreeMarker模板开发指南知识点梳理
		
    freemarker是什么? 有什么用? 怎么用? (问得好,这些都是我想知道的问题) freemarker是什么? FreeMarker 是一款 模板引擎: 即一种基于模板和要改变的数据, 并用来生 ...
    
		
    7. 
						
  7. Jetty使用教程（四：21-22）—Jetty开发指南
		
    二十一.嵌入式开发 21.1 Jetty嵌入式开发HelloWorld 本章节将提供一些教程,通过Jetty API快速开发嵌入式代码 21.1.1 下载Jetty的jar包 Jetty目前已经把所有 ...
    
		
    8. 
						
  8. JVM 平台上的各种语言的开发指南
		
    JVM 平台上的各种语言的开发指南 为什么我们需要如此多的JVM语言? 在2013年你可以有50中JVM语言的选择来用于你的下一个项目.尽管你可以说出一大打的名字,你会准备为你的下一个项目选择一种新的 ...
    
		
    9. 
						
  9. Webpack 入门指南 - 3. Hello, Angular2!
		
    Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. c# 第26节 Main方法
			
    本节内容: 1:Main方法 2:Main方法的定义 3:测试Main函数传入参数 4:Main的大总结 1:Main方法是什么 2:Main方法的定义 3:测试打印出外部传入Main的参数 clas ...
    
			
    2. 
						
  2. MySQL 王者晋级之路
			
    3.2 Query Cache: 3.3 存储引擎 一.TokuDB的特点: – 插入性能加快20到80倍– 压缩数据减少存储空间– 数据量可扩展到几个TB– 不会产生索引碎片– 支持Hot Colu ...
    
			
    3. 
						
  3. zz自动驾驶多传感器感知的探索1
			
    Pony.ai 在多传感器感知上积累了很多的经验,尤其是今年年初在卡车上开始了新的尝试.我们有不同的传感器配置,以及不同的场景,对多传感器融合的一些新的挑战,有了更深刻的认识,今天把这些经验,总结一下 ...
    
			
    4. 
						
  4. linux常用终端命令
			
    01. 终端命令格式 command [-options] [parameter] 说明: command:命令名,相应功能的英文单词或单词的缩写 [-options]:选项,可用来对命令进行控制,也 ...
    
			
    5. 
						
  5. sublime3配置
			
    1.sunblim3配置 一旦配置好了,如果换了一台电脑那直接将C:\Users\djx\AppData\Roaming\Sublime Text 3\Packages\User文件夹拷贝到新下载的s ...
    
			
    6. 
						
  6. Python实现网络图形化界面多人聊天室 - Windows
			
    Python实现网络图形化界面多人聊天室 - Windows 项目名称:网络多人聊天室图形界面版本 项目思路: server.py 服务端文件,主进程中,创建图形化界面,询问地址(主机名,端口),点击 ...
    
			
    7. 
						
  7. 大话设计模式Python实现-外观模式
			
    外观模式(Facade Pattern):为子系统中的一组接口提供一个一致界面,此模式定义一个高层接口,使得子系统更加容易使用 下面是一个外观模式的demo: #!/usr/bin/env pytho ...
    
			
    8. 
						
  8. 解决静态方法调用注入的service
			
    在使用jpa的复杂查询时,声明了specification时声明为静态方法,导致注入的service无法使用,故想到俩种方式,一种手动注入,一种注解注入,此文使用的时注解注入: 解决静态方法调用注入的 ...
    
			
    9. 
						
  9. 八、Spring之深入理解声明式事务
			
    Spring之深入理解声明式事务 何为事务? 事务就是把一系列的动作当成一个独立的工作单元,这些动作要么全部完成,要么全部不起作用. 事务的四个属性: 1.原子性(atomicity) 事务是原子性操 ...
    
			
    10. 
						
  10. html点击弹出QQ添加好友的窗口
			
    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1377732948&q ...
    
			
    11.