码迷,mamicode.com
首页 > Web开发 > 详细

webpack的入门学习

时间:2017-09-30 17:43:44      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:ports   创建   output   配置   file   执行   try   img   script   

1、配置文件创建

新建两个文件夹distsrc,以及内部的文件。

再新建一个配置文件webpack.config.js

为什么要新建这么一个文件呢?

因为当我们在命令行中直接使用webpack”命令去对项目进行打包时,webpack会去项目的根目录下直接去找webpack.config.js这个配置文件,webpack会将其作为默认的配置去运行打包

 技术分享

webpack.config.js配置文件如下:

module.exports = {

entry : {

main : __dirname + ‘/src/script/main.js‘,

a : __dirname + ‘/src/script/a.js‘

},

output:{

path : __dirname + ‘/dist/js‘,   //打包后文件放置的路径

filename: ‘[name]-[hash].js‘,   //打包后文件的文件名

       publicPath : ‘http://cdn.com/‘    //理解成占位符

}

}

备注:entry 表示唯一入口JS,后面可以跟一个js,也可以跟JSON,也可以跟数组形式。

output表示输出的环境,path表示根路径,filename表示,输出的文件名称,[name]可以自动获取entry传进来的文件的名称,[hash]获取20位的哈希值,为了唯一性,每次执行都不一样(修改过的文件),没修改的不变。

注意:[hash:5]表示获取5位的hash值。(默认为20位)

publicPath 表示占位符,如果有这参数,以后输出的js文件前头加上该字段。

这样就会在dist的文件夹中的js文件夹里多了两个js文件.

 技术分享

 

为了简便起见,在package.json中的“script”中添加"webpack" : "webpack --config webpack.config.js --display-modules --progress --colors  --display-reasons"

以后不用输入很长的命令行,可以这么写:

npm run webpack

 

注意:entry指打包的入口从哪个文件开始(格式可以是一个字符串(即单个路径)、数组(多个路径)、json)。当为一个文件时,就会将所有要打包的文件全部引入到这个文件来进行打包,并打包成一个文件;当是一个数组时,即会有多个不存在依赖(各运行各自的)的文件打包成一个文件;当为一个json格式(多页面应用时使用)时,则要以keyvalue形式来配置,value可以是字符串,也可以是数组;

 技术分享

output:指打包后文件放在哪。filename:不要将文件名写死(entry的格式为json时,且入口文件为多个时,一旦写死,则会只生成一个文件),最好写成filename: ‘[name]-[hash].js‘,

webpack的入门学习

标签:ports   创建   output   配置   file   执行   try   img   script   

原文地址:http://www.cnblogs.com/andyfeng/p/7615503.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!