webpack使用的基本配置

原创 2018年04月17日 16:44:07

在前端自动化构建开发当中,利用webpack可以很大程度的优化前端开发的工作。在学习webpack之余,总结了一下webpack的基本使用方法。

1) 安装:npm 全局安装webpack

npm install webpack –g

2) 基本使用例子:hello.js

(1) 新建webpackdir文件夹 mkdir webpackdir

mkdir webpackdir
(2)进入文件夹,初始化 npm init

(3)项目中安装开发依赖 webpack

npm install webpack --save-dev

(4)创建hello.js

function hello(str) {
  alert(str)
}

(5)控制台进行打包(hello.js =>hello.bundle.js)

webpack hello.js hello.bundle.js
Hash: 打包的哈希值
Version: webpack版本
Asset: 打包之后生成文件
Chunks: 打包的模块数

Chunk Names: 打包分块的块名称

3) 例子:利用webpack对js文件中引入其他js、css文件,并对css文件进行编译

(1)创建index.js
(2)创建被引入的test.js以及style.css
(3)在index.js中引入test.js、style.css

Webpack 在处理css文件时,需要有对应的loader进行编译 项目文件中需要安装 css-loader/style-loader

npm install css-loader --save-dev 
npm install style-loader --save-dev
require('./test.js');
require('style-loader!css-loader!./style.css');

css需先用css-loader进行处理再用style-loader进行处理

(4)webpack打包文件,并将打包后的js引入index.html中

4) webpack的基本配置

文件夹下安装 webpack

npm install webpack --save-dev
创建资源文件目录 /src /dist 创建webpack.config.js配置文件(默认配置文件名称)
module.exports = {
  entry:'./src/main.js' , 打包入口地址
  output:{
    path: __dirname+'/dist/js', 打包文件输出地址
    filename:'bundle.js' 打包文件名称
  }
}
运行webpack

·详解entry、output

entry
单个入口(简写)语法 用法:entry: string|Array< string>
const config = {
  entry: './path/to/my/entry/file.js'
};

module.exports = config;
entry 属性的单个入口语法,是下面的简写:

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};
当你向 entry 传入一个数组时会发生什么?向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入,并且将它们的依赖导向(graph)到一个“chunk”时,传入数组的方式就很有用。

对象语法 用法:entry: {[entryChunkName: string]: string|Array< string>}
const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};
对象语法会比较繁琐。然而,这是应用程序中定义入口的最可扩展的方式。
“可扩展的 webpack 配置”是指,可重用并且可以与其他配置组合使用。这是一种流行的技术,用于将关注点(concern)从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具(如 webpack-merge)将它们合并。

demo 两个入口文件打包到同一个js中

module.exports = {
  entry:['./src/main.js','./src/a.js'] , 打包入口地址
  output:{
    path: __dirname+'/dist/js', 打包文件输出地址
    filename:'bundle.js' 打包文件名称
  }
}
output
配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个入口起点,但只指定一个输出配置。
在 webpack 中配置 output 属性的最低要求是,将它的值设置为一个对象,包括以下两点:
filename 用于输出文件的文件名。
目标输出目录 path 的绝对路径。
const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;
此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中。

=> 单页面应用配置

指定entry/output 路径

单个入口文件情形
const config = {
  entry:'./src/main.js',
  output:{
    filename:'bundle.js',
    path:__dirname+'/dist/'
  }
}
module.exports = config;

多个平行入口文件打包在一起
const config = {
  entry:['./src/main.js','./src/page.js'],
  output:{
    filename:'bundle.js',
    path:__dirname+'/dist/'
  }
}
module.exports = config;

=> 多页面应用配置

指定entry/output 路径

const config = {
  entry:{
    index:'./src/main.js',
    page:'./src/page.js'
  },
  output:{
    filename:'[name]_bundle.js',
    path:__dirname+'/dist/'
  }
}

module.exports = config;
占位符有3个
[name]  入口文件名
[hash]  哈希值(哈希值可以认为是文件的版本号,只有文件发生变化时,哈希值才发生变化)
[chunkhash] 每一个chunk的哈希值

const config = {
  entry:{
    index:'./src/main.js',
    page:'./src/page.js'
  },
  output:{
    filename:'[name]-[chunkhash]-bundle.js',
    path:__dirname+'/dist/'
  }
}

module.exports = config;
在webpack的使用过程中,可参考一下webpack的官方api文档,文档详述了webpack的配置参数,更有助于对webpack的理解。本文结。

React+Webpack配置开发项

一、React+Webpack 3.10基本配置 首先:初始化npm init 1、安装react 模块 npm install -g react npm install -g r...
  • Mr_Dave
  • Mr_Dave
  • 2018-01-09 15:01:57
  • 105

webpack-2-基本配置

webpack 2 基本配置,DevServer 配置说明 最近重构代码时,把 webpack 升级到了 2.2.1,结果完全无法运行,正好看到了这份文档,讲解的很详细,所以就学习了一下,应用到项...
  • mjzhang1993
  • mjzhang1993
  • 2017-03-21 12:12:54
  • 3885

webpack的基本配置项详解

1.webpack有一个默认的配置文件webpack.config.js,这个文件需要手动的创建,位于项目根目录中。可以为一个项目设置多个配置文件,已达到不同的配置文件完成不同的功能。怎么设置后面介绍...
  • yyjourney
  • yyjourney
  • 2017-08-30 10:40:33
  • 246

webpack配置及优化

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过...
  • qq_27626333
  • qq_27626333
  • 2017-09-11 20:02:12
  • 638

webpack使用优化(基本篇)

webpack使用优化(基本篇) 转自:https://github.com/lcxfs1991/blog/issues/2 前言 本文不是webpack入门文章,如果对webp...
  • p312011150
  • p312011150
  • 2017-09-18 16:14:50
  • 540

webpack实用配置

版本号   以entry.js打包为bundle.js为例,出口的filename可以设置为[id]、[name]、[hash]、[chunkhash]等替换形式,如下所示 var...
  • hezuohuoban882
  • hezuohuoban882
  • 2017-07-27 09:58:03
  • 425

webpack使用介绍

  • 2018年04月04日 11:14
  • 855KB
  • 下载

webpack使用ParallelUglifyPlugin实例

  • 2018年04月17日 14:07
  • 2KB
  • 下载

webpack的基本配置

转眼春节之后已经快要开工一个月了,还记得春节期间给自己定下的一个小目标,在2017年要学会react相关的技术。其实2016年我已经对react开发有所实践,但是总觉得似懂非懂。所以开了博客来梳理一下...
  • yanzhi_2016
  • yanzhi_2016
  • 2017-02-25 17:10:02
  • 57
收藏助手
不良信息举报
您举报文章:webpack使用的基本配置
举报原因:
原因补充:

(最多只允许输入30个字)