Demo6:打包局部css(scoped)

  • html:
<html>
  <body>
    <h1 class="h1">Hello World</h1>
    <h2 class="h2">Hello Webpack</h2>
    <div id="example"></div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>
  • css:
/* local scope */
.h1 {
    color:red;
  }
  
  /* global scope */
  :global(.h2) {
    color: blue;//作用于全局
  }
  • main.jsx
const React = require('react')
const ReactDOM = require('react-dom')
const style = require('./index.css')

ReactDOM.render(
  <div>
    <h1 className={style.h1}>FOO</h1>
    <h2 className="h2">Bar</h2>
  </div>,
  document.querySelector('#example')
)

  • webpack.config.js
module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',//将es6转换为es5
          options: {
            presets: ['es2015', 'react']
          }}},
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true
            } } ] }]}}

Demo7:使用webpack插件 UglifyJs Plugin打包js

  • webpack.config.js
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [new UglifyJsPlugin()]
}

注:

webpack和webpack-cli要求是要全局安装,如果需要使用uglifyjs-webpack-plugin插件压缩js,

需要项目内安装webpack和webpack-cli,报错了就按照给的npm install xx 安装

项目名称不能为"webpack",


Demo8:使用 html-webpack-plugin 打包html

main.js下写点逻辑

  • webpack.config.js
const HtmlwebpackPlugin = require('html-webpack-plugin')//npm 先安装这2个插件
const OpenBrowserPlugin = require('open-browser-webpack-plugin')

module.exports = {
    entry:'./main.js',
    output:{
        filename:'bundle.js'
    },
    plugins:[
        new HtmlwebpackPlugin({
            title:'MyWebPack-demos',
            filename:'index.html'
        }),
        new OpenBrowserPlugin({
            url:'http://localhost:8080'
        })
    ]
}

注:package.json下需要配置

  "scripts": {    "dev": "webpack-dev-server",    "build": "webpack"  }

html-webpack-plugin:将js逻辑打包成html

open-browser-webpack-plugin:打开浏览器插件,启动项目后会自动打开一个新的浏览器选项卡.

上面webpack成功后,进入dist内,npm run dev(配置好上面的scripts)


Demo9:设定环境变量 Environment flags 

main.js:

document.write('<h1>Hello World</h1>');

if (__DEV__) {
  document.write(new Date()); //__DEV__为true时能打包进去
}

webpack.config.js

var webpack = require('webpack');

var devFlagPlugin = new webpack.DefinePlugin({
 // __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
// 上面这句阮老师的原demo下我webpack后并没有将上面的时间戳打包进去,scripts那里我设置看DEBUG=true。仔细看了下,是JSON.parse的原因,
 __DEV__: JSON.stringify(process.env.DEBUG || 'false')//直接序列化就行了
});

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [devFlagPlugin]
};
// package.json
{
  // ...
  "scripts": {
    "dev": "cross-env DEBUG=true webpack-dev-server --open",
  },
  // ...
}

webpack 后就能看到 bundle.js打包了2条语句,包括DEBUG=true的那句


Demo10:代码分割 Code splitting 打包

code splitting就是将文件分割成块(chunk), 我们可以定义一些分割点(split point), 根据这些分割点对文件进行分块, 并实现按需加载.

这个demo我直接用阮一峰老师的了。

/*
 *
*/
require.ensure(['./a'], function(require) {
    var content = require('./a');
    document.open();
    document.write('<h1>' + content + '</h1>');
    document.close();
  });
  
  • require.ensure()特定于webpack,并由取代import()
require.ensure(
  dependencies: String[],
  callback: function(require),
  errorCallback: function(error),
  chunkName: String
)
  • dependencies:一个字符串数组,声明callback要执行中的代码所需的所有模块。
  • callback:一旦依赖项被加载,webpack将执行的功能。该require功能的实现作为参数发送给该功能。功能主体可以使用require()它来执行所需的其他模块。
  • errorCallback:当webpack无法加载依赖项时执行的功能。
  • chunkName:由此特定对象创建的块的名称require.ensure()。通过将其传递chunkName给各种require.ensure()调用,我们可以将其代码合并为一个块,从而仅产生一个浏览器必须加载的包。

爬。