webpack_配置和使用教程
webpack是一个模块打包的工具，它的作用是把互相依赖的模块处理成静态资源。
webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。
webpack安装
1.webpack基于node.js环境安装，可以去Node.js官网下载，使用node -v检查是否安装成功。
2.使用npm安装webpack，通过全局先将webpack指令安装进电脑中
npm install webpack -g
3.cmd（终端） cd命令使当前目录转到当前项目的目录下, 然后输入下面这段命令
npm init
接下来会弹出一些信息, 就是一些项目名和一些参数的描述, 可以全部按回车使用默认信息, 完成之后项目文件夹下会生成一个package.json的文件。
这样webpack就安装完成了。
webpack配置
1.创建项目文件夹， 名字自起， 但路径名不要包含中文， 以及项目名也不要叫”webpack”，并且不要包含大写字母。
2.接下来创建并编写配置文件。首先我们先介绍几个配置文件的参数：
- entry： 是 页面入口文件配置 （html文件引入唯一的js 文件）
- output：对应输出项配置
- path ：入口文件最终要输出到哪里
- filename：输出文件的名称
- publicPath：公共资源路径
在你的项目目录下创建webpack.config.js配置文件，通过这个文件进行webpack的配置，并且还要创建一些路径保存基本文件。
更目录创建静态资源文件夹src，src目录下创建js，img，css，sass等文件夹纺织静态文件。
在src的js下创建一个入口文件, 我创建的叫做entry.js, 在项目目录再创建一个index.html用来调试使用. 编写webpack.config.js文件：
1 //webpack.config.js 2 module.exports = { 3 entry : './src/js/entry.js',//入口文件 4 output : {//输出文件 5 filename : 'index.js',//输出文件名 6 path : __dirname + '/out'//输出文件路径 7 }, 8 }
我们随便在index.html和入口文件entry.js写点什么看看是否成功配置。
1 //index.html 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8" /> 6 <title>ss</title> 7 </head> 8 <body> 9 111 10 <script src="./out/index.js"></script>//注意在这里引入的是打包完成的js文件 11 </body> 12 </html>
1 //entry.js 2 console.log('1234');
cmd打开终端 cd命令使目录为当前项目目录, 输入webpack或者webpack -w命令, 查看index.html是否成功console出1234
webpack 和 webpack -w 区别
webpack -w可以对项目打包并且实时监控, 当前配置文件下的文件如果发生更改时重新打包, 但如果webpack的配置文件即webpack.config.js更改时还是要通过webpack进行打包.(退出webpack -w 操作 ctrl+c)
打包一些基本的js文件操作，下一篇文章介绍loader打包非js文件和一些配置。
