怎么安装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. 快速傅里叶变换(FFT)学习笔记
			
    定义 多项式 系数表示法 设\(A(x)\)表示一个\(n-1\)次多项式,则所有项的系数组成的\(n\)维向量\((a_0,a_1,a_2,\dots,a_{n-1})\)唯一确定了这个多项式. 即 ...
    
			
    2. 
						
  2. 使用Sourcetree(for windows)建立github同步仓库
			
    回顾Linux作业中用命令行的方式管理本地与远程仓库的过程,原理图如下: 与之前本质相同,但是使用GUI的github管理工具将更为便捷,Sourcetree就是其中之一 1.在Windows下安装g ...
    
			
    3. 
						
  3. SpringCloud微服务常见组件理解
			
    概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留在对Spring Cloud功能使用的层面,其底层的很多原理,很多人可能并不知晓 ...
    
			
    4. 
						
  4. x1
			
    //程序功能: //要求客户从键盘输入一个整数,判断其是奇是偶 #include <stdio.h> int main(){ int x; printf("输入一个整数:\n&q ...
    
			
    5. 
						
  5. mybatis错误：There is no getter for property named 'delegate' in 'class com.sun.proxy.$Proxy某某'
			
    错误描述: There is no getter for property named 'delegate' in 'class com.sun.proxy.$Proxy32' 错误原因: 1.你有多 ...
    
			
    6. 
						
  6. JSP页面的注释细节
			
    业务场景:通过后台传参,jstl标签控制一个页签是否显示,不过现在要去掉判断,直接让页签显示 在sublime直接这样注释,然后刷新,一直找不到标签显示,其它的都是正常的 <!--<c:i ...
    
			
    7. 
						
  7. 【Oracle】rman基于时间点恢复
			
    rman基于时间点恢复 场景: 由于某研究的误操作,导致财务模块的数据丢失,如何使用rman基于时间点恢复数据. 思路 1.克隆数据库的虚拟机,直接对数据库的数据进行恢复 RMAN> shutd ...
    
			
    8. 
						
  8. ThinkPHP框架获取上一条插入语句产生的id
			
    今天在fastAdmin框架想搞一个拖动进行排序的功能 遇到一个问题是权重的字段值一样的话拖动会出bug,所以想让权重字段(weigh)的值等于当前id的值, 搜索看到的方法如下 实际应用的地方,是写 ...
    
			
    9. 
						
  9. python yield from (一)
			
    1. yield from 会抛出iterator中所有的值:而yield只是抛出传进来的值,如果是值,就抛出值,如果是iterator对象,抛出iterator对象 def g1(iterable) ...
    
			
    10. 
						
  10. HTML教程详解
			
    HTML学习笔记 目录 一.html简介 1.html是什么? 2.html能做什么(html的作用)? 3.html书写规范 二.html基本标签 1.标签的语法 2.标签的分类 3.常用标签: 1 ...
    
			
    11.