webpack4.x配置过程（二）

此文根据阮一峰大神的demo结合自己的配置项目改编而成：github
1、demo01，这个是一个非常简单的demo，请仔细实践上一篇。

2、dem02，配置多入口文件：
2.1、新建src/search.js，输入document.write(‘i am search’);
2.2、dist/index.html 加上：<script src="./bundle2.js"></script>
2.3、 webpack.config.js

var path = require('path');
const config = {
  entry: {
    bundle:'./src/index.js',
    bundle2:'./src/search.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'//这里的[name]是占位符,之后会替换为 bundle1、bundle2
  },
  devServer : {
    host: 'localhost',    // 服务器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服务端压缩是否开启
    port: 3004, // 端口
    hot: true,
    open: true, // 自动打开浏览器
    overlay: {
        errors: true
    }
  }
}

module.exports = config;

2.4、运行：npm run build 然后运行：npm run dev

3、demo3，将js转为es

4、demo import css 引入css
4.1、创建src/style/app.css文件
4.2、安装style-loader和css-loader

npm install style-loader css-loader --save-dev

4.3、src/index.js

import './styles/index.css';//使用import将css引入到js
document.write('hello wrold');

4.4、webpack.config.js

var path = require('path');
const config = {
  entry: {
    bundle:'./src/index.js',
    bundle2:'./src/search.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'//这里的[name]是占位符,之后会替换为 bundle1、bundle2
  },
  module: {
    rules:[
      {
        test: /\.css$/,
        loader: [ 'style-loader', 'css-loader' ]//此处用use不知道为什么报错
      },
    ]
  },
  devServer : {
    host: 'localhost',    // 服务器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服务端压缩是否开启
    port: 3004, // 端口
    hot: true,
    open: true, // 自动打开浏览器
    overlay: {
        errors: true
    }
  }
}

module.exports = config;

4.5 npm run build，会发现index.html的head运行时会添加style节点，这是bundle.js的运行结果。
这里写图片描述

5、demo05处理图片(使用loader)
5.1、添加两张图片到src文件夹
5.2、index.js

import './styles/index.css';
var img1 = document.createElement("img");
img1.src = require("./small.png");
document.body.appendChild(img1);

var img2 = document.createElement("img");
img2.src = require("./big.png");
document.body.appendChild(img2);

5.3、styles/index.css添加

.img{
    width: 100px;
    height:100px;
    background:url(../big.png);
}

5.4、webpack.config.js

var path = require('path');
const config = {
  entry: {
    bundle:'./src/index.js',
    bundle2:'./src/search.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'//这里的[name]是占位符,之后会替换为 bundle1、bundle2
  },
  module: {
    rules:[
      {
        test: /\.css$/,
        loader: [ 'style-loader', 'css-loader' ]
      },
      {//新增这里
        test: /\.(png|jpg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]  
  },
  devServer : {
    host: 'localhost',    // 服务器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服务端压缩是否开启
    port: 3004, // 端口
    hot: true,
    open: true, // 自动打开浏览器
    overlay: {
        errors: true
    }
  }
}

module.exports = config;

5.5、insall loader

npm install --save-dev url-loader file-loader

5.6、运行

npm run build

6、demo06

7、demo07 压缩js（使用插件 plugins）
webpack.config.js

var path = require('path');
var webpack = require('webpack');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const config = {
  entry: {
    bundle:'./src/index.js',
    bundle2:'./src/search.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'//这里的[name]是占位符,之后会替换为 bundle1、bundle2
  },
  module: {
    rules:[
      {
        test: /\.css$/,
        loader: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(png|jpg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]  
  },
  plugins: [    //新增这里
    new UglifyJsPlugin()
  ],
  devServer : {
    host: 'localhost',    // 服务器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服务端压缩是否开启
    port: 3004, // 端口
    hot: true,
    open: true, // 自动打开浏览器
    overlay: {
        errors: true
    }
  }
}

module.exports = config;

7.2、运行npm run build（然而好像并没有压缩，因为本来就是个压缩文件）

更新中……..

webpack4.x配置过程（二）

猜你喜欢