webpack使用的基本配置

在前端自动化构建开发当中,利用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的理解。本文结。
阅读更多
文章标签: webpack js 前端
个人分类: webpack
上一篇CSS基础知识
下一篇vue项目中,页面刷新回到页面顶部的方法
想对作者说点什么? 我来说一句

webpack使用介绍

2018年04月04日 855KB 下载

webpack使用ParallelUglifyPlugin实例

2018年04月17日 2KB 下载

没有更多推荐了,返回首页

关闭
关闭