一、webpack4.0基础篇2

业界资讯 2019-02-20 14:00:50 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_25354709/article/details/87637629

注意：接上一篇文章《一、webpack4.0基础篇》

六、转化es6语法

本节来看一下，怎么在webpack中处理js模块。

我们需要把ES6转换成ES5语法。

安装：

npm install babel-loader @babel/core @babel/preset-env -D

@babel/preset-env就是用来把ES6转换成ES5语法的。 

 src/index.js:

let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')

// ES6语法
let fn = () => {
  console.log('log') // log
}
fn()

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    // 对单独抽离出来的main.css进行压缩时，
    // 使用到了optimize-css-assets-webpack-plugin插件
    // 因此需要加一个优化项配置
    optimization: {
        minimizer: [
            // 对生成的bundle.js进行压缩
            new UglifyJsPlugin({
                cache: true,
                // 并发打包，一起压缩多个。
                parallel: true,
                sourceMap: true
            }),
            // 对抽离出来的main.css进行压缩
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,   // 编译的进度条
        contentBase: './dist',    // 以dist目录为默认启动目录
        compress: true,     // 自动压缩
        open: true       // 自动打开浏览器，适合懒人
    },
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'production',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
        // [hash:8]，只显示8位的hash值
        filename: 'bundle.[hash:8].js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    },
    // 数组 放着所有的webpack插件
    plugins: [
        // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
        new HtmlWebpackPlugin({
            template: './src/index.html',   // 使用哪个html模板
            filename: 'index.html',         // 打包后也叫做 index.html
            // 压缩这个html文件(主要是对HTML文件进行压缩)
            minify: {
                // 删除这个html文件的双引号
                removeAttributeQuotes: true,
                // 变成一行
                collapseWhitespace: true
            },
            // 加一个hash戳
            hash: true
        }),
        new MiniCssExtractPlugin({
            // 抽离出来的文件叫 main.css
            filename: 'main.css',
        })
    ],
    module: { // 模块
        rules: [
            {
                // 找到所有的js文件
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    // 用babel-loader，需要把ES6转换成ES5语法
                    options: {
                        presets: [
                            // @babel/preset-env 就是用来将ES6转化成ES5语法的
                            '@babel/preset-env'
                        ]
                    }
                }
            },
            // 规则,需要css-loader， 可以处理css文件
            // css-loader 主要用来解析 @import这种语法的
            // 还需要style-loader，它是把css插入到head的标签中
            // loader的用法， 多个loader需要一个数组
            // loader是有顺序的，默认是从右向左执行
            // loader还可以写成 对象方式
            {
                test: /\.css$/,
                use: [
                    // 把样式都抽离成一个单独的css文件，叫main.css
                   MiniCssExtractPlugin.loader,
                    // 给CSS3语法，比如transfrom加上前缀。
                    // 需要新建 postcss.config.js 配置文件
                    // 需要引用 autoprefixer 这个插件
                    'css-loader',
                    'postcss-loader'
                ]
            },
            // 还可以处理less文件
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'less-loader' // 把less转变为css
                ]
            },
            // 还可能处理 sass stylus,
            // sass 要安装的包 node-sass sass-loader
            // stylus 要安装的包 stylus stylus-loader
            {
                // 找到所有的scss文件
                test: /\.scss$/,
                // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'sass-loader'  // 把scss转变为css
                ]
            },
            {
                // 找到所有的.styl文件
                test: /\.styl$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'stylus-loader'  // 把stylus转变为css
                ]
            }
        ]
    }
}

运行：

npm run dev

浏览器成功打印出 'log'。

七、处理js语法及校验 

1、将ES7的语法(ES7中的类)转换成ES5语法

需要用到 @babel/plugin-proposal-class-properties 这个插件。

安装：

npm install @babel/plugin-proposal-class-properties -D

在 webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    // 对单独抽离出来的main.css进行压缩时，
    // 使用到了optimize-css-assets-webpack-plugin插件
    // 因此需要加一个优化项配置
    optimization: {
        minimizer: [
            // 对生成的bundle.js进行压缩
            new UglifyJsPlugin({
                cache: true,
                // 并发打包，一起压缩多个。
                parallel: true,
                sourceMap: true
            }),
            // 对抽离出来的main.css进行压缩
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,   // 编译的进度条
        contentBase: './dist',    // 以dist目录为默认启动目录
        compress: true,     // 自动压缩
        open: true       // 自动打开浏览器，适合懒人
    },
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'production',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
        // [hash:8]，只显示8位的hash值
        filename: 'bundle.[hash:8].js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    },
    // 数组 放着所有的webpack插件
    plugins: [
        // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
        new HtmlWebpackPlugin({
            template: './src/index.html',   // 使用哪个html模板
            filename: 'index.html',         // 打包后也叫做 index.html
            // 压缩这个html文件(主要是对HTML文件进行压缩)
            minify: {
                // 删除这个html文件的双引号
                removeAttributeQuotes: true,
                // 变成一行
                collapseWhitespace: true
            },
            // 加一个hash戳
            hash: true
        }),
        new MiniCssExtractPlugin({
            // 抽离出来的文件叫 main.css
            filename: 'main.css',
        })
    ],
    module: { // 模块
        rules: [
            {
                // 找到所有的js文件
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    // 用babel-loader，需要把ES6转换成ES5语法
                    options: {
                        // 这是一个大插件的集合
                        presets: [
                            // @babel/preset-env 就是用来将ES6转化成ES5语法的
                            '@babel/preset-env'
                        ],
                        // 我们还需要配置一些小插件
                        plugins: [
                            // 将ES7语法转换成ES5语法
                            '@babel/plugin-proposal-class-properties'
                        ]
                    }
                }
            },
            // 规则,需要css-loader， 可以处理css文件
            // css-loader 主要用来解析 @import这种语法的
            // 还需要style-loader，它是把css插入到head的标签中
            // loader的用法， 多个loader需要一个数组
            // loader是有顺序的，默认是从右向左执行
            // loader还可以写成 对象方式
            {
                test: /\.css$/,
                use: [
                    // 把样式都抽离成一个单独的css文件，叫main.css
                   MiniCssExtractPlugin.loader,
                    // 给CSS3语法，比如transfrom加上前缀。
                    // 需要新建 postcss.config.js 配置文件
                    // 需要引用 autoprefixer 这个插件
                    'css-loader',
                    'postcss-loader'
                ]
            },
            // 还可以处理less文件
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'less-loader' // 把less转变为css
                ]
            },
            // 还可能处理 sass stylus,
            // sass 要安装的包 node-sass sass-loader
            // stylus 要安装的包 stylus stylus-loader
            {
                // 找到所有的scss文件
                test: /\.scss$/,
                // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'sass-loader'  // 把scss转变为css
                ]
            },
            {
                // 找到所有的.styl文件
                test: /\.styl$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'stylus-loader'  // 把stylus转变为css
                ]
            }
        ]
    }
}

src/index.js:

let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')

// ES6语法
let fn = () => {
  console.log('log')
}
fn()


// 这是ES7的语法
// 需要使用到 @babel/plugin-proposal-class-properties 这个插件
class A {
  a = 1;
}
let a = new A()
console.log(a.a) // 1

运行：

npm run dev

浏览器成功打印出：1

2、将ES7中的类的装饰器，转换成ES5语法

ES7的类 需要使用到 @babel/plugin-proposal-class-properties 这个插件
而类的装饰器 需要用到 @babel/plugin-proposal-decorators 这个插件

先使用 @babel/plugin-proposal-decorators，然后再使用 @babel/plugin-prosopal-class-properties

安装：

npm install @babel/plugin-proposal-decorators -D

在src/index.js中写类的装饰器：

let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')

// ES6语法
let fn = () => {
  console.log('log')
}
fn()


// 这是ES7的语法
// ES7的类 需要使用到 @babel/plugin-proposal-class-properties 这个插件
// 而类的装饰器 需要用到 @babel/plugin-proposal-decorators 这个插件
@log // 类的装饰器
class A {
  a = 1;
}
let a = new A()
console.log(a.a) // 1

function log (target) {
  console.log(target, '23')
}

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    })
  ],
  module: { // 模块
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}]
            ]
          }
        }
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

 运行：

npm run dev

浏览器：

ES7

成功将ES7的类的装饰器转换成了ES5语法。

3、将ES7的生成器转换成ES5语法

使用@babel/plugin-transform-runtime 

安装：

npm install @babel/plugin-transform-runtime -D

// 或者 

npm install @babel/plugin-transform-runtime --save-dev

-D 就是 --save-dev，被写入到devDependencies对象里面去，

-S 就是 --save， 被写入到dependencies 对象里面去。

而package.json文件里面的 devDependencies 和 dependencies 对象有什么区别呢？

devDependencies 里面的插件只用于开发环境，不用于生产环境，而dependencies 是需要发布到生产环境的。

还需要一个插件 @babel/runtime

安装：

npm install --save @babel/runtime

src/a.js:

module.exports = 'hello'

class B {

}

function * gen (params) {
  yield 1
}
console.log(gen().next())

 在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    })
  ],
  module: { // 模块
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
               '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

 运行：

npm run dev

4、将ES7的includes语法转换成ES5语法。

需要用到@babel-polyfill 这个插件。

npm install @babel/polyfill --save

src/a.js:

module.exports = 'hello'
require('@babel/polyfill')  // 支持ES7的includes语法

class B {

}

function * gen (params) {
  yield 1
}
console.log(gen().next())


// includes 是ES7的语法
'aaa'.includes('a')

5、校验js代码

需要 eslint-loader 插件。

安装：

npm install eslint eslint-loader --save

可以在 https://eslint.org/demo/ 里面，进行配置，然后下载 .eslintrc.json 文件。

比如：

ESLint

ESLint

或者，在项目根目录新建 .eslintrc.json 文件。

.eslintrc.json:

可以查看eslint-loader的配置文档： https://www.npmjs.com/package/eslint-loader。

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    })
  ],
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'eslint-loader',
          options: {
             enforce: 'pre'   // previous 是之前执行 ，让eslint-loader 强制在之前执行。  post是之后
          }
        }
      },
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
               '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

八、全局变量引入问题

1、expose-loader

比如，安装jQuery

npm install jquery --save

需要使用到一个插件： expose-loader， 暴露全局的loader，是一个内联的loader。

pre 前面执行的loader， normal 普通的loader， 内联 loader， 后置 post loader。

安装：

npm install expose-loader -D

expose-loader 可以把比如jquery之类的库，暴露到window上

src/index.js:

// import $ from 'jquery'
// console.log($)


// 内联loader
import $ from 'expose-loader?$!jquery'  // 将jquery暴露成一个$
// expose-loader 暴露全局的loader
console.log(window.$)

 2、也可以直接配置到webpack.config.js文件中：

  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        test: require.resolve('jquery'),
        use: 'expose-loader?$'
      },

然后，src/index.js中引入jquery:

import $ from 'jquery'
console.log(window.$)

运行：

npm run dev

 

3、js文件中不引入jquery，也可以拿到$

需要用到一个webpack的内置插件

src/index.js:

console.log($);  // 在每个模块中注入 $对象

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// webpack 也是一个模块
let webpack = require('webpack')

module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    }),
      // 提供插件
    new webpack.ProvidePlugin({
        // 把$用jquery暴露出来
        $: 'jquery'
    })
  ],
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

运行：

npm run dev

4、如果在html中外链引入jquery

src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: pink;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<!-- 模板 -->
<div>内容区</div>
<div class="scss">scss</div>
<div class="stylus">stylus</div>
</body>
</html>

然后又在src/index.js中引入：


import $ from 'jquery';
console.log($);

我们希望在html文件中外链引入的jquery不参与打包。

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')

// webpack 也是一个模块
let webpack = require('webpack')

module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    }),
      // 提供插件
    new webpack.ProvidePlugin({
        // 把$用jquery暴露出来
        $: 'jquery'
    })
  ],
  // jquery是在html文件中引用的，不进行打包
  externals: {
    jquery: '$'
  },
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [      
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

运行：

npm run dev

总结：

有以下几种方式来引入第三方模块，比如jquery。

(1) expose-loader ，暴露到window上。

(2) webpack.providePlugin， 给每个人提供一个$。

(3) 直接引入但是不打包，在webpack.config.js中进行配置。

九、图片处理

如何在webpack中使用图片，并且能让webpack来打包我们的图片。

图片引入有很多种方式：

(1) 在js中创建图片来引入

(2)  在css中引入，比如background()

(3)  在html中通过 <img src="" alt="" />

1、在js中创建图片来引入

src/index.js:

// (1) 在js中创建图片来引入
import logo from './logo.png'  // 把图片引入，返回的结果是一个新的图片地址
let image = new Image()
console.log(logo)
image.src = logo
document.body.appendChild(image)

复制一张图片到src目录，重命名为 logo.png。

需要用到一个插件：

npm install file-loader -D

file-loader 默认会在内部生成一张图片，到src目录下。

并且会把生成的图片的名字返回回来。

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    })
  ],
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        // 找到所有的图片
        test:/\.(png|jpg|gif)$/,
        use: 'file-loader'
      },
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

因为图片是实体文件，所以运行打包：

npm run build

会在dist目录生成一个图片的文件。

webpack

然后运行开发环境，打开浏览器查看：

npm run dev

成功在页面上输出图片！ 

2、在CSS中引入图片

src/index.css:

@import './a.css';
body {
    background: #c00;
    transform: rotate(45deg);
    background: url("./logo.png");
}

 在index.js中引入：

import './index.css'

然后在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    })
  ],
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        // 找到所有的图片
        test:/\.(png|jpg|gif)$/,
        use: 'file-loader'
      },
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

运行：

npm run dev

3、在html文件中引入

 src/index.html:

<img src="./logo.png" alt="" />

这里需要一个插件：

npm install html-withimg-loader -D

 在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    })
  ],
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        // 找到html文件
        test: /\.html$/,
        use: 'html-withimg-loader'
      },
      {
        // 找到所有的图片
        test:/\.(png|jpg|gif)$/,
        use: 'file-loader'
      },
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

运行：

npm run dev

4、url-loader

file-loader和url-loader都可以用来处理图片。

安装：

npm install url-loader -D

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist') // 路径必须是一个绝对路径
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      filename: 'main.css'
    })
  ],
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        // 找到html文件
        test: /\.html$/,
        use: 'html-withimg-loader'
      },
      {
        // 找到所有的图片
        test:/\.(png|jpg|gif)$/,
        // 做一个限制，当我们的图片，小于多少k的时候，用base64来转化
        // 否则用file-loader产生真实的图片
        use: {
          loader: 'url-loader',
          options: {
            limit: 200*1024   // 小于200k，会转化成base64
          }
        }
      },
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

 进行打包：

npm run build

十、打包文件分类

我们还需要给我们的静态资源，进行分类。

css抽离出来放到一个目录下，图片放到另一个目录下。

而且，给打包出来的css和js以及图片路径前，都加上 "http://xxx.com"。

 在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

// path是node的内置模块，所以不需要去安装
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  // 对单独抽离出来的main.css进行压缩时，
  // 使用到了optimize-css-assets-webpack-plugin插件
  // 因此需要加一个优化项配置
  optimization: {
    minimizer: [
      // 对生成的bundle.js进行压缩
      new UglifyJsPlugin({
        cache: true,
        // 并发打包，一起压缩多个。
        parallel: true,
        sourceMap: true
      }),
      // 对抽离出来的main.css进行压缩
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true, // 编译的进度条
    contentBase: './dist', // 以dist目录为默认启动目录
    compress: true, // 自动压缩
    open: true // 自动打开浏览器，适合懒人
  },
  // 模式：默认有两种，一种叫生产环境production， 一种叫 development
  // production 是经过压缩过的
  // 所以，我们选择 development模式，可以看清打包后的代码
  mode: 'production',
  entry: './src/index.js', // 入口文件，也就是打包这个js文件
  // 打包的文件位置
  output: {
    // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
    // [hash:8]，只显示8位的hash值
    filename: 'bundle.[hash:8].js', // 打包出来当然文件名叫 bundle.js
    // resolve() 可以把相对路径解析成绝对路径
    // __dirname 是当前目录
    path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    // 那么html中的css和图片，都会加上这个前缀路径
    publicPath: 'http://xxx.com'  // 给打包出来的路径都加上这个前缀
  },
  // 数组 放着所有的webpack插件
  plugins: [
    // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
    new HtmlWebpackPlugin({
      template: './src/index.html', // 使用哪个html模板
      filename: 'index.html', // 打包后也叫做 index.html
      // 压缩这个html文件(主要是对HTML文件进行压缩)
      minify: {
        // 删除这个html文件的双引号
        removeAttributeQuotes: true,
        // 变成一行
        collapseWhitespace: true
      },
      // 加一个hash戳
      hash: true
    }),
    new MiniCssExtractPlugin({
      // 抽离出来的文件叫 main.css
      // filename: 'main.css'
      // 抽离出来的main.css 放到css目录下
      filename: 'css/main.css'
    })
  ],
  module: { // 模块
    // loader 默认是从右到左， 从下到上执行
    rules: [
      {
        // 找到html文件
        test: /\.html$/,
        use: 'html-withimg-loader'
      },
      {
        // 找到所有的图片
        test:/\.(png|jpg|gif)$/,
        // 做一个限制，当我们的图片，小于多少k的时候，用base64来转化
        // 否则用file-loader产生真实的图片
        use: {
          loader: 'url-loader',
          options: {
            // limit: 200*1024,   // 200k
              limit: 1,          // 一般都会大于1字节。会生成一个真实的图片
              outputPath: '/img/'
          }
        }
      },
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          // 用babel-loader，需要把ES6转换成ES5语法
          options: {
            // 这是一个大插件的集合
            presets: [
              // @babel/preset-env 就是用来将ES6转化成ES5语法的
              '@babel/preset-env'
            ],
            // 我们还需要配置一些小插件
            plugins: [
              // 将ES7语法中的类装饰器转换成ES5语法， legacy 是宽松模式
              ['@babel/plugin-proposal-decorators', {'legacy': true}],
              // 将ES7语法中的类转换成ES5语法
              ['@babel/plugin-proposal-class-properties', {'loose': true}],
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        // 只查找src目录下的js
        include: path.resolve(__dirname, 'src'),
        // 不找node_modules里面的js
        // 排除
        exclude: /node_modules/
      },
      // 规则,需要css-loader， 可以处理css文件
      // css-loader 主要用来解析 @import这种语法的
      // 还需要style-loader，它是把css插入到head的标签中
      // loader的用法， 多个loader需要一个数组
      // loader是有顺序的，默认是从右向左执行
      // loader还可以写成 对象方式
      {
        test: /\.css$/,
        use: [
          // 把样式都抽离成一个单独的css文件，叫main.css
          MiniCssExtractPlugin.loader,
          // 给CSS3语法，比如transfrom加上前缀。
          // 需要新建 postcss.config.js 配置文件
          // 需要引用 autoprefixer 这个插件
          'css-loader',
          'postcss-loader'
        ]
      },
      // 还可以处理less文件
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'less-loader' // 把less转变为css
        ]
      },
      // 还可能处理 sass stylus,
      // sass 要安装的包 node-sass sass-loader
      // stylus 要安装的包 stylus stylus-loader
      {
        // 找到所有的scss文件
        test: /\.scss$/,
        // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'sass-loader' // 把scss转变为css
        ]
      },
      {
        // 找到所有的.styl文件
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // 解析 @import这种语法的
          'postcss-loader',
          'stylus-loader' // 把stylus转变为css
        ]
      }
    ]
  }
}

打包：

npm run build

打包结果：

webpack

2、如果只想给图片进行路径的处理

那么单独在处理图片的里面加上 publicPath。

webpack.config.js:

{
        // 找到所有的图片
        test:/\.(png|jpg|gif)$/,
        // 做一个限制，当我们的图片，小于多少k的时候，用base64来转化
        // 否则用file-loader产生真实的图片
        use: {
          loader: 'url-loader',
          options: {
            // limit: 200*1024,   // 200k
              limit: 1,          // 一般都会大于1字节。会生成一个真实的图片
              outputPath: '/img/',
              publicPath: 'http://123.com'   // 单独给图片的路径加上前缀路径
          }
        }
      },

而这里就可以不用加了：

webpack

在output对象里面加，是给所有打包出来的css和图片以及js，路径都加上前缀路径 "http://xxx.com" 。 

运行：

npm run build

结果是只给图片加上了前缀路径，而css和js路径，都没有加前缀路径。 

猜你喜欢

转载自blog.csdn.net/qq_25354709/article/details/87637629
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022