• webpack开发指南1

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

    
    
          
    • 

          
  • 

            相关阅读:
    
            
              Java抽象类、接口能否有构造方法
                
    Java堆溢出、栈溢出示例
                
    typora常用快捷键
                
    什么是业务逻辑
                
    解决idea登录github出现的invalid authentication data 404 not found
                
    SQL常用聚合函数
                
    oracle存储过程/函数调试
                
    解决IDEA全局搜索Ctrl+Shift+F失效问题
                
    如何在win10系统中使用Linux命令
                
    Java复现NullPointerException异常
                
                    
          
    • 
          
  • 
            原文地址：https://www.cnblogs.com/yuaima/p/5894277.html
          
    • 

        

      



      
      

        

        

      

    

  


  

  
Copyright © 2020-2023 
  润新知