怎么安装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. 常用的架包对应的maven配置
			
    <!-- https://mvnrepository.com/artifact/com.google.guava/guava --> <dependency> <grou ...
    
			
    2. 
						
  2. Jenkins配置:添加用户和管理权限
			
    Jenkins配置:添加用户和管理权限 参考文章:http://www.cnblogs.com/zz0412/p/jenkins_jj_14.html 今天给大家说说使用Jenkins专有用户数据库的 ...
    
			
    3. 
						
  3. RPC调用和HTTP调用的区别
			
    很长时间以来都没有怎么好好搞清楚RPC(即Remote Procedure Call,远程过程调用)和HTTP调用的区别,不都是写一个服务然后在客户端调用么?这里请允许我迷之一笑~Naive!本文简单 ...
    
			
    4. 
						
  4. Windows编译运行webrtc全过程
			
    年纪大了,不想写什么开头.摘要,咱直接开始吧. 不过首先还是要感谢声网提供的webrtc国内源码镜像. 首先,编译webrtc你需要一台win10,而且必须得是一直在更新版本的.因为编译过程需要用到c ...
    
			
    5. 
						
  5. 【08月28日】A股滚动市盈率PE历史新低排名
			
    2010年01月01日 到 2019年08月28日 之间,滚动市盈率历史新低排名. 上市三年以上的公司,2019年08月28日市盈率在300以下的公司. 1 - 文山电力(SH600995) - 历史 ...
    
			
    6. 
						
  6. HTML连载20-并集选择器&兄弟选择器
			
    一.并集选择器 1.作用:给所有的选择器选中的标签设置属性. 2.格式: 选择器1,选择器2{ 属性:值: } 3.例如: .abc1,#abc2{ color:red; } .......省略代码. ...
    
			
    7. 
						
  7. 构建Shiny应用
			
    构建Shiny应用 1.什么是Shiny? Shiny是一个R的应用包,帮助用户构建可交互的web应用.它可以结合HTML和CSS代码,以及R 语言的运算能力. 2.下载R Shiny 下载R包 in ...
    
			
    8. 
						
  8. Thread 另类用法，如何执行一段可能死锁/卡死/死循环的代码
			
    场景与需求 需要执行一段第三方的代码,这段代码可能死锁/卡死/死循环,在超时之后,如果没有结束,则认为任务执行失败,退出执行. 实现方案1:使用 Task 超时 实现方法参考: https://www ...
    
			
    9. 
						
  9. python安装扩展”unable to find vcvarsall.bat“的解决办法
			
    产生原因: python3.4用的是msvs2010编译的,所以python3.4默认只能认出msvs2010以上版本 python2.7用的是msvs2008编译的,所以python2.7默认只能认 ...
    
			
    10. 
						
  10. Jsp和Servlet有什么区别？
			
    Servlet接口中有哪些方法? Servlet接口定义了5个方法,其中前三个方法与Servlet生命周期相关: void init(ServletConfig config) throws Serv ...
    
			
    11.