怎么安装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
);
												


																

最新文章
	

    
						
  1. LeetCode Plus One Linked List
		
    2. 
						
  2. 开篇----JavaScript细节的那些事儿
		
    3. 
						
  3. [Monitor] 监控规则定义
		
    4. 
						
  4. python 高级特性
		
    5. 
						
  5. Java API 快速速查宝典
		
    6. 
						
  6. 对MySQL DELETE语法的详细解析
		
    7. 
						
  7. 信息熵 Information Theory
		
    8. 
						
  8. UVA 10917 Walk Through the Forest（dijkstra+DAG上的dp）
		
    9. 
						
  9. js基础第二天
		
    10. 
						
  10. ANDROID_MARS学习笔记_S01原始版_009_SQLite
		
    11. 
						
  11. 为什么要设置Java环境变量（详解）
		
    12. 
						
  12. [置顶] SQL注入问题
		
    13. 
						
  13. mac下升级ruby环境版本
		
    14. 
						
  14. [Netty 1] 初识Netty
		
    15. 
						
  15. docker 创建本地镜像服务器
		
    16. 
						
  16. VMware 设置共享目录
		
    17. 
						
  17. python爬虫---抓取优酷的电影
		
    18. 
						
  18. Component(组件)
		
    19. 
						
  19. jQuery学习之二
		
    20. 
						
  20. MFC  CEdit控件 自动换行
		
    21. 
		

	


热门文章
	

    
									
  1. [C2W3] Improving Deep Neural Networks : Hyperparameter tuning, Batch Normalization and Programming Frameworks
			
    2. 
						
  2. MongoTemplate 分组分页复合条件查询
			
    3. 
						
  3. [Taro] taro中定义以及使用全局变量
			
    4. 
						
  4. 8.Go-Reader,Writer和ioutil
			
    5. 
						
  5. weblogic 12c 安装与下载
			
    6. 
						
  6. D3力布图绘制--节点跑掉，单曲线弯曲问题记录
			
    7. 
						
  7. 如何配置jdk的本地环境
			
    8. 
						
  8. vsftpd限制下载流量
			
    9. 
						
  9. 简明了解apply()和call()
			
    10. 
						
  10. RHCE实验记录总结-2-RHCE
			
    11.