自动化构建工具WebPack

Webpack中文文档:https://www.webpackjs.com/

什么是 Webpack?

webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。

创新互联网站建设服务商,为中小企业提供网站设计、成都网站设计服务,网站设计,网站托管运营等一站式综合服务型公司,专业打造企业形象网站,让您在众多竞争对手中脱颖而出创新互联

安装 Webpack

# 全局安装
npm install webpack -g
# 局部安装
npm install webpack --save-dev

由于webpack1.x和3.x版本存在区别,全局安装webpack以后,再局部安装可以避免版本冲突或不合适的情况

Webpack 打包js文件

    # webpack 原始js文件路径 打包后存放js文件路径
    webpack src/js/entry.js dist/js/bundle.js

Webpack 的配置文件webpack.config.js

const path = require('path');

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 打包后输出的配置块
  output: {
    // 文件名
    filename: 'bundle.js',
    // 调用resolve()设置路径
    path: path.resolve(__dirname, 'dist')
  }
};

配置完成以后,只需要执行webpack即可开始打包。

Webpack 打包css文件

(1) 下载对应的loader加载器:

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

url-loader是对 file-loader高层封装,需要配合file-loader使用。

(2) 配置使用:

const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
   // 添加模块配置
   module: {
     // 查找规则
     rules: [
       {
         test: /\.css$/,
         // 要加载使用Loader
         use: [
           'style-loader',
           'css-loader'
         ]
       }
     ]
   }
  };

Webpack打包图像文件

(1) 下载对应的loader加载器:

npm install --save-dev file-loader

(2) 配置使用:

const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
       // 添加模块配置项
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader'
         ]
       }
      ]
    }
  };

Webpack热加载技术

(1) 下载对应的安装包:

npm install --save-dev webpack-dev-server

(2) 配置使用:

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

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
   // 添加配置项   
   devtool: 'inline-source-map',
   devServer: {
     // 服务器内容目录
     contentBase: './dist'
   },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

(3) 添加脚本命令:

{
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "webpack --watch",
      // 配置一个命令名称
+     "start": "webpack-dev-server --open",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.16",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "xml-loader": "^1.2.1"
    }
  }

Webpack插件的使用

var webpack = require('webpack');
// 导入非 webpack 自带默认插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');

// 在配置中添加插件
plugins: [
  // 构建优化插件
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor-[hash].min.js',
  }),
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false,
      drop_console: false,
    }
  }),
  new ExtractTextPlugin({
    filename: 'build.min.css',
    allChunks: true,
  }),
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  // 编译时(compile time)插件
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"production"',
  }),
  // webpack-dev-server 强化插件
  new DashboardPlugin(),
  new webpack.HotModuleReplacementPlugin(),
]

当前题目:自动化构建工具WebPack
URL网址:https://www.cdcxhl.com/article34/ijpgpe.html

成都网站建设公司_创新互联,为您提供网站导航外贸建站手机网站建设电子商务企业网站制作网站建设

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网页设计公司