首页 > Web开发 > 详细

webpack打包初识

时间:2017-02-17 15:49:47      阅读:269      评论:0      收藏:0      [点我收藏+]

1.新建项目目录,目录名称webpack-test

技术分享

2.进入新建的项目目录中(webpack-test)

cd webpack-test

技术分享

3.使用命令初始化目录

cnpm init

技术分享

4.在3步骤基础上,会输出让你输入初始化目录的相关信息,你可以根据自己的实际情况进行输入,当然你也可以一路回车下去

技术分享

技术分享

5.使用命令安装webpack

cnpm install webpack --save-dev

技术分享

6.查看生成的目录结构

dir

技术分享

7.根据项目需求创建相应的目录

源文件目录
mkdir src
静态资源目录
mkdir dist

技术分享

技术分享

8.进入src目录,在源文件目录中创建脚本目录和样式目录

脚本目录
mkdir script
样式目录
mkdir style

技术分享

技术分享

9.进入dist目录,在静态资源目录中创建js目录,用于存储打包生成的js文件

cd dist
mkdir js

技术分享

技术分享

10.在script目录中创建main.js文件,用来编写我们的业务脚本

cd ..
cd src
cd script
echo ... > main.js
main.js内容如下:
	function helloWorld(){

	}

技术分享

技术分享

技术分享

11.在根目录创建项目初始化页面

echo ... > index.html
文件名:index.html
内容如下:
		<!DOCTYPE html>
		<html>
		<head>
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<title></title>
			<link rel="stylesheet" href="">
		</head>
		<body>
			<script src="bundle.js"></script>
		</body>
		</html>

技术分享

12.创建webpack.config.js配置文件

echo ... > webpack.config.js
webpack.config.js内容如下:
		module.exports={
			entry:‘./src/script/main.js‘,
			output:{
				path:‘./dist/js‘,
				filename:‘bundle.js‘
			}
		}

技术分享

13.在命令行运行webpack命令

技术分享

14.打开dist/js目录查看生成的bundle.js文件,如果bundle.js文件存在,则说明webpack.config.js文件已经生效

cd dist/js
dir

技术分享

15.假如修改webpack.config.js文件名,将其重命名为其他的名称,你想的都可以,我这里用webpack.dev.config.js

ren webpack.config.js webpack.dev.config.js
dir

技术分享

16.在命令行运行webpack命令,输出的内容将与12步骤不同,那么如何设置才能再输出12步骤的内容?

webpack

技术分享

17.在命令行输入webpack --config webpack.dev.config.js后回车

webpack --config webpack.dev.config.js

技术分享

18.在自定义配置webpack.config.js文件之后,如何使用webpack的其他参数?

19.修改package.json文件

{
    "name": "webpack-test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reason"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^2.2.1"
    }
}

20.运行webpack

cnpm run webpack

技术分享

本文出自 “素颜” 博客,请务必保留此出处http://suyanzhu.blog.51cto.com/8050189/1898702

webpack打包初识

原文:http://suyanzhu.blog.51cto.com/8050189/1898702

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!