webpack简单介绍

责编:menVScode 2017-07-07 20:06 阅读(699)

        webpack是一个模块打包器。

        先来查看项目各个文件:

QQ截图20170707194325

        如何使用webpack

        1、安装webpack:npm install webpack --save-dev

        2、创建webpack.config.js文件,对文件进行配置

const path = require('path');
module.exports = {
	entry : './src/app.js',//入口文件
	output : { //程序打包的出口
		filename:'main.js', //打包好的文件叫什么名字
		path: path.resolve(__dirname, 'dist/assets'), //文件打包到那个地方,path是一个绝对路劲
		//__dirname:当前文件所在的目录,然后在拼接上dist/assets
		publicPath:'/assets/'
	}
}

        3、Nav.js文件

export default function Nav(){
	console.log('I am Navs');
}

        4、app.js文件

import Nav from './components/Nav.js'
Nav()

        5、设置package.json文件:在script下自定义命令 --- "dev" : "webpack"。关于package.json知识点可查看这篇文章:http://menvscode.com/detail/595e5eb241d2a6025bbe044e

{
  "name": "npmcase",
  "version": "1.0.0",
  "description": "menvscode.com",
  "main": "index.js",
  "scripts": {
    "dev" : "webpack"
  },
  "author": "menvscode",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.4"
  },
  "devDependencies": {
    "webpack": "^3.1.0"
  }
}

        6、打开命令行窗口(win+R),要在项目文件目录下,执行:npm run dev。然后就会自动在dist文件夹下,创建assets文件夹,生成main.js

QQ截图20170707195211

        7、在html文件引入main.js即可。

        简单介绍到此为此,注意 "简单"二字,webpack的力量不仅仅止于此。

标签: webpack
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码