流程
Step 1:首先安装Node.js, 可以去Node.js官网下载.
Step2:在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中
npm install webpack -g
Step3:使用Git Bash here 或者 cmd cd命令使当前目录转到当前项目的目录下, 然后输入下面这段命令
npm init
接下来会弹出一些信息, 就是一些项目名和一些参数的描述, 可以全部按回车使用默认信息, 完成之后项目文件夹下会生成一个package.json的文件
这样webpack就安装完成了.
Step1:创建项目文件夹, 名字自起, 但路径名不要包含中文, 以及项目名也不要叫”webpack”, 并且不要包含大写字母.
例:
Step2:接下来创建并编写配置文件. 首先我们先介绍几个配置文件的参数.
entry： 是 页面入口文件配置 （html文件引入唯一的js 文件）
output：对应输出项配置
path ：入口文件最终要输出到哪里，
filename：输出文件的名称
publicPath：公共资源路径
Step3:在你的项目目录下创建webpack.config.js配置文件, 通过这个文件进行webpack的配置, 并且还要创建一些路径保存基本文件. 例如:
src文件夹
Step4:在src的js下创建一个入口文件, 我创建的叫做entry.js, 在项目目录再创建一个index.html用来调试使用. 编写webpack.config.js文件,
//webpack.config.jsmodule.exports = { entry :'./src/js/entry.js',//入口文件output : {//输出文件filename :'index.js',//输出文件名path : __dirname +'/out'//输出文件路径},}
//webpack.config.jsmodule.exports = {
entry :'./src/js/entry.js',//入口文件output : {//输出文件filename :'index.js',//输出文件名path : __dirname +'/out'//输出文件路径},
}
便在index.html和入口文件entry.js写点什么看看是否成功配置,
//index.htmlss111//注意在这里引入的是打包完成的js文件
//entry.jsconsole.log('1234');
1
2
之后使用Git Bash here 或者 cmd cd命令使目录为当前项目目录, 输入webpack或者webpack -w命令, 查看index.html是否成功console出1234;
webpack 和 webpack -w 区别
webpack -w可以对项目打包并且实时监控, 当前配置文件下的文件如果发生更改时重新打包, 但如果webpack的配置文件即webpack.config.js更改时还是要通过webpack进行打包.(退出webpack -w 操作 ctrl+c)
接下来我们继续配置loader, 通过加载器处理文件：比如 sass less 等, 告知 webpack 每一种文件都需要使用什么加载器来处理。
Step1:为了方便我们先统一把所有的包都先下载下来, 下面再慢慢解释.
npm install babel-loaderbabel babel-corecss-loaderstyle-loaderurl-loaderfile-loaderless-loaderless--save-dev
Step2:下载完成后, 我们修改webpack.config.js文件, 将加载器引入.
Step3:接下来我们先测试css, 我们在项目文件夹下的src文件夹下创建index.css. 随便写一点属性.
因为在webpack中所有文件都是模块, 所以必须要将css引入. 在刚刚的entry.js中添加如下代码.
//entry.jsrequire('../css/index.css');//引入css文件console.log("1234");
1
2
3
打包webpack一下看看效果
Step4:当有多个js文件时, 如何进行引入呢? 接下来我们做一个简单小功能来说明这个问题, 让我们点击方块的时候, 方块变大.
接下来在src的js文件夹下创建一个基本的工具tool.js(很多小的问题都被我扩大化了, 只是为了说明问题不一定适用)
src的js下创建一个demo1.js文件, demo2.js同理
修改入口文件entry.js
require('../css/index.css');vardemo1 =require('../js/demo1.js');vardemo2 =require('../js/demo2.js'); demo1.init(); demo2.init();
webpack一下, 看看效果
Step1:在img文件夹下随便找一个小一点的图片放进去.
Step2:修改entry.js
由于我们引入的是静态资源, 在webpack.config.js中修改一下
大家自己webpack看看效果
我们在项目中有多个html文件时怎么处理呢?, 接下来我们重新设定配置文件, webpack.config.js
首先我们由于要使用webpack插件, 因此我们要重新下载一下webpack包, 将目录定位到当前项目目录, 输入npm install webpack
之后我们修改webpack.config.js, 将下面代码放到配置文件开头. 这样就可以使用插件了
varwebpack =require('webpack');
将插件信息写到配置文件里
首先先定位目录输入命令npm install webpack-dev-server -g
, 修改webpack.config.js文件
publicPath:'http://localhost:8080/out',
1
html文件所引用的目录也要更改:
webpack-dev-server一下看看效果
