webpack4打包工具

时间  2019-12-04
标签 webpack4 webpack 打包 工具 繁體版
原文   原文链接

什么是webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个 bundlecss

能够作的事情

代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布
复制代码

须要提早掌握的内容

  • 须要node基础，以及npm的使用
  • 掌握es6语法

主要学习webpack哪些内容

  • webpack常见配置
  • webpack高级配置
  • webpack优化策略
  • ast抽象语法树
  • webpack中的Tapable
  • 掌握webpack流程，手写webpack
  • 手写webpack中常见的loader
  • 手写webpack中常见的plugin

建立文件

mkdir webpack-test && cd webpack-test
mkdir src
touch src/index.js
复制代码

初始化文件

npm init -y  初始文件（默认的）
npm init 
复制代码

开始打包

npx webpack
复制代码

配置webpack.config.js

touch webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devServer: { // 开发服务器的配置
       contentBase: path.join(__dirname, 'dist'),
       compress: true,
       port: 3000
    },
    mode: 'development', // 模式 默认两种production development
    entry: './src/index.js', //入口
    output: {
        filename: 'bundle.js', //打包后的文件名
        path: path.resolve(__dirname, 'dist'), //路径必须是一个绝对路径
    },
    plugins: [// 数组放着全部的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        })
    ]
}
复制代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="bundle.js"></script>
</body>
</html>
复制代码

index.js

var root = document.getElementById("root");
root.innerHTML="你好"
复制代码

webpack常见配置

npm i webpack webpack-cli -D
npm i html-webpack-plugin -D
复制代码

使用模板 html

  • html-webpack-plugin 能够指定template模板文件，将会在output目录下，生成html文件，并引入打包后的js.
npm i  html-webpack-plugin -D
复制代码

webpack-dev-server

  • webpack-dev-server提供了一个简单的Web服务器和实时热更新的能力
npm i webpack-dev-server -D
复制代码

pagkage.js

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1"
  }
}

复制代码

目前的目录

启动项目

npm run dev
复制代码

浏览器输入http://localhost:3000/

加载样式文件

  • 在src目录下建立一个index.css
body{
    background-color:red;
}
复制代码
  • 在index.js中引入index.css
require('./index.css');
复制代码
  • webpack.config.js增长一些参数
module: { //模块
   rules: [ // 规则 css-loader 
   //  style-loader 把css插入到head的标签中
   //  loader的特色： 但愿单一
   //  loader的用法： 字符串只用一个loader
   //  多个loader须要[]
   //  loader的顺序 默认是从右向左执行
   //  loader还能够写出对象方式
   {
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader'
    ]
   },
   ]
}
复制代码
  • css-loader style-loader
npm i  css-loader style-loader -D
复制代码
  • 效果以下

加载less（sass,stylus相似）

  • 在src目录下建立一个index.less
body{
    #root{
        border:1px yellow solid;
        color: #000;
    }
}
复制代码
  • 在index.js中引入index.less
require('./index.css');
复制代码
  • webpack.config.js增长一些参数
{
    test: /\.less$/,
    use: [
        {
           loader: 'style-loader',
        },
        'css-loader','less-loader'
    ]
 },
复制代码
  • less-loader
npm i less less-loader -D
复制代码
  • 效果以下

提取单独打包css文件

npm i mini-css-extract-plugin -D
复制代码
  • webpack.config.js增长一些参数
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 plugins: [ 
        new MiniCssExtractPlugin({
            filename: 'main.css'
        })
    ],
module: { //模块
        use: [
            MiniCssExtractPlugin.loader,
        ]
       },
       {
        test: /\.less$/,
        use: [
            MiniCssExtractPlugin.loader,
        ]
       }
       ]
    }
复制代码

css3样式自动加前缀

npm i postcss-loader autoprefixer -D
复制代码
  • 在webpack-test建立postcss.config.js
module.exports = {
    plugins: [require('autoprefixer')]
}
复制代码
  • webpack.config.js增长一些参数
{
    test: /\.css$/,
    use: [
        {
           loader: 'style-loader',
        //    options: {
        //        insertAt: 'top' //内联样式最高级
        //    }
        },
        'css-loader',
        'postcss-loader'
    ]
    },
    {
    test: /\.less$/,
    use: [
        {
           loader: 'style-loader',
        },
        'css-loader',
        'postcss-loader',
        'less-loader'
    ]
}
复制代码

转化es6语法

npm i babel-loader @babel/core @babel/preset-env -D
npm i @babel/plugin-proposal-class-properties -D
复制代码
  • webpack.config.js增长一些参数
rules: [ 
{
test: /\.js$/,
use: {
    loader: 'babel-loader',
    options: { // 用babel-loader 须要把es6-es5
      presets: [
          '@babel/preset-env'
      ],
      plugins: [
        '@babel/plugin-proposal-class-properties'
    ]
    }
}
] 
复制代码

全局变量引入

npm i jquery -D
npm i expose-loader -D
复制代码

第一种

  • import $ from 'jquery';
  • webpack.config.js增长一些参数
rules: [ 
        {
           test: require.resolve('jquery'),
           use: 'expose-loader?$'
        },
]
复制代码

第二种

  • webpack.config.js增长一些参数
const webpack = require('webpack');
plugins: [ // 数组放着全部的webpack插件
    new webpack.ProvidePlugin({
        $: 'jquery' // 在每一个模块中注入$对象
    })
],
复制代码

引入图片处理

// 1.在js中建立图片来引入
// 2.在css引入backgroud('url')
// 3.<img src="" alt="" />>
npm i file-loader -D
npm i html-withimg-loader -D
复制代码
  • webpack.config.js增长一些参数
rules: [ 
        {
          test: /\.html$/,
          use: 'html-withimg-loader'
        },
        {
         test: /\.(png|jpg|gif)$/,
         use: 'file-loader'
        },
]
复制代码
  • 限制图片大小
npm i url-loader -D
复制代码
  • webpack.config.js增长一些参数
{
 test: /\.(png|jpg|gif)$/,
 use: {
     loader: 'url-loader',
     options: {
         limit: 200*1024
     }
 }
复制代码

images和css打包分类

  • webpack.config.js增长一些参数
plugins: [ // 数组放着全部的webpack插件
    new MiniCssExtractPlugin({
        filename: 'css/main.css'
    }),
],
{
 test: /\.(png|jpg|gif)$/,
 use: {
     loader: 'url-loader',
     options: {
         limit: 1,
         outputPath: '/img/',
         publicPath: 'https://www.baidu.com' // 在图片上加域名
     }
 }
复制代码

多页面打包

  • 在scr建立一个other.js
console.log("other 一路走好！")
复制代码
  • webpack.config.js增长一些参数
// 多入口
entry: {
   index: './src/index.js', 
   home: './src/other.js',
},
output: {
    filename: '[name].js', //打包后的文件名
    path: path.resolve(__dirname, 'dist'), //路径必须是一个绝对路径
    // publicPath: 'https://www.baidu.com'
},
plugins: [ // 数组放着全部的webpack插件
    new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html',
        chunks: ['index']
    }),
    new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'home.html',
        chunks: ['home']
    }),
]
复制代码

配置source-map调试代码

  • webpack.config.js增长一些参数
output: {
    filename: '[name].js', //打包后的文件名
    path: path.resolve(__dirname, 'dist'), //路径必须是一个绝对路径
    // publicPath: 'https://www.baidu.com'
},
// devtool: 'source-map', // 1.增长映射文件 能够帮咱们调试源代码
// devtool: 'eval-source-map', // 2.不会产生单独的文件,可是能够显示行和列
// devtool: 'cheap-module-source-map', // 3.不会产生列，可是是一个单独的映射文件（产生后你能够保留起来）
devtool: 'cheap-module-eval-source-map',// 4.不会长生文件，集成在打包后的文件中不会产生列
复制代码

watch实时打包

  • webpack.config.js增长一些参数
entry: {
   index: './src/index.js', 
   home: './src/other.js',
},
watch: true,
watchOptions: { // 监控的选项
  poll: 1000, // 每秒问我1000次
  aggregateTimeout: 500, // 防抖
  ignored: /node_modules/ // 不须要进行监控哪一个文件
},
复制代码

经常使用的小插件

  • 清除dist (clean-webpack-plugin)
  • 拷贝文件(copy-webpack-plugin)
  • 版权注释(bannerPlugin)
npm i clean-webpack-plugin -D
npm i copy-webpack-plugin -D
复制代码
  • 在webpack-test建立doc文件,里面建立hello.txt
  • webpack.config.js增长一些参数
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
plugins: [ 
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin([
        {from: 'doc', to: './'}
    ]),
    new webpack.BannerPlugin('cl by 2019')
],
复制代码

webpack跨域问题

npm i express -D
复制代码
  • 1)webpack代理
  • 在webpack-test目录下建立server.js
let express = require('express');
let app = express();
app.get('/user', (req, res)=> {
    res.json({ name: "xiaolin3333" })
})
app.listen(3000);
复制代码
  • webpack.config.js配置
devServer: { // 开发服务器的配置
    // 1)http:proxy
     proxy: {// 从新的方式 把请求代理到express服务器!
        '/api': {
            target: 'http://localhost:3000',
            pathRewrite: {'/api': ''}
        } // 配置了一个代理
     }
    },
复制代码
  • index.js
let xhr = new XMLHttpRequest();

xhr.open('GET', '/api/user', true);

xhr.onload = function() {
    console.log(xhr.response,);
}

xhr.send();
复制代码
  • 启动 node server.js && npm run dev
  • 2)前端只想单纯来模拟数据
  • webpack.config.js配置
devServer: { // 开发服务器的配置
    // 2)前端只想单纯来模拟数据
     before(app) { // 提供的方法 钩子
         app.get('/user', (req, res)=> {
             res.json({ name: "xiaolinwww" })
         })
     }
复制代码
  • index.js
let xhr = new XMLHttpRequest();
xhr.open('GET', '/user', true);

xhr.onload = function() {
    console.log(xhr.response,);
}

xhr.send();
复制代码
  • 启动 npm run dev
  • 3）有服务端 不想用代理来处理 能不能再服务端中启动webpack端口用服务端口
npm i webpack-dev-middleware -D
复制代码
  • server.js
let express = require('express');

let app = express();
let webpack = require('webpack');

// 中间件
let middle = require('webpack-dev-middleware');

let config = require('./webpack.config');

let compiler = webpack(config);

app.use(middle(compiler));

app.get('/user', (req, res)=> {
    res.json({ name: "xiaolin3333-webpack-dev-middleware" })
})

app.listen(3000);
复制代码
  • index.js
let xhr = new XMLHttpRequest();
xhr.open('GET', '/user', true);

xhr.onload = function() {
    console.log(xhr.response,);
}

xhr.send();
复制代码

resolve属性的配置

yarn add css-loader style-loader -D
复制代码
  • index.js
import './style';

style.css

body{
    background-color:green;
    transform: rotate(90deg);
}
复制代码
  • webpack.config.js配置
resolve: {// 解析第三方包 common
   modules: [path.resolve('node_modules')],
   extensions: ['.js','.css','.vue']
//    alias: { // 别名 vue vue.runtime
//       bootstrap: 'bootstrap/dist/css/bootstrap.css'
//    },
//    mainFields: ['style', 'main']
//    mainFields: [],// 入口文件的名字index.js
},
 module: { //模块
   rules: [ 
       {
          test: /\.css$/,
          use: ['style-loader','css-loader']
       },
    ]
}
复制代码

项目文件未更新

今天到此结束，明天更新。。。。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程