webpack开发指南1

时间：2021-08-25 15:16:36

怎么安装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
);
标签：
相关文章