webpack打包初识
2017-02-17 10:34
281 查看
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
相关文章推荐
- webpack打包avalon
- webpack+avalon+mmState打包方案
- webpack分离css单独打包
- webpack打包并将文件加载到指定的位置
- webpack -p压缩打包react报语法错误处理
- Webpack - CommonJs & AMD 模块打包器
- 彻底解决Webpack打包慢的问题
- Webpack打包React踩到的坑
- 初试webpack打包
- 彻底解决Webpack打包性能问题
- 使用webpack打包的后,公共请求路径的配置问题
- node.js之打包工具webpack
- 前端模块化实践----使用webpack打包js代码
- 使用 React和webpack开发和打包发布
- 如何降低Vue.js项目中Webpack打包文件的大小?
- webpack打包avalon+mmRouter
- 打包利器webpack
- Webpack入门——使用Webpack打包Angular项目的一个例子
- webpack打包第三方类库的正确姿势
- 【前端知识点】webpack 打包 + es6 + react入门(一)webpack打包