webpack的使用

1.1全局安装webpack

npm install webpack -g

1.2创建文件夹

1.在你本地创建该项目的文件夹

-mywebpack

2.在文件夹中右键+shift打开npm命令窗口 npm -init（填写个人管理信息）填写完成会出现一个package.json文件

注意：如果使用到npm的包，最好联网现下，因为npm版本更新的比较快，里面的包也会跟着升级

1.3创建.gitignore文件

最好用webstorm打开该文件夹，创建.gitignore文件（不要忘记前边的点），该文件是为了防止文件丢失，改点东西，它能创建一个git版本号。

1.4创建dist文件夹目录和src文件夹目录

dist用来存放输出文件使用，src用来存放源文件使用，子目录有js文件夹，css文件夹，images文件夹，入口文件index.html

1.5创建webpack配置文件webpack.develop.config.js和wbpack.publish.config.js

在webpack文件夹下配置这两个文件，该文件是项目的开发环境配置文件和项目部署环境配置文件

注意：第一次构建项目时最好在这两个文件中都写上注释

1.6本地下载webpack文件

npm install webpack -save-dev

1.7在webpack.develop.config.js项目开发环境配置文件中编写配置文件

/ 这是最基本的一个配置文件
// 编写配置文件，要有最基本的文件入口和输出文件配置信息等
// 里面还可以加loader和各种插件配置使用
var path = require('path');

module.exports = {
    entry:path.resolve(__dirname,'src/js/app.js'),
    output: {
        path: path.resolve(__dirname, dist/'bundle.js'),
        filename: 'bundle.js',
    },
}

注意：在index.html中引入的是输出的文件名，而不是输入的文件名

1.8执行webpack

webpack --config webpack.develop.config.js 因为自己修改了配置文件名，所以这里需要自己写上文件名，如果没有修改文件名，则webpack会自动去本地寻找一个叫webpack.config.js的文件，默认去执行。

执行完毕之后，webpack帮我打包了一个叫bundle.js的文件.

2.1webpack -h

会出现webpack的所有命令

2.2解决问题：每次写完代码都要用很多命令去运行webpack（很多情况下是记不住那么多代码的）

解决方案：在npm的package.json配置文件中加两个选项

scripts": {
  	"test": "echo \"Error: no test specified\" && exit 1",
  	"develop": "webpack --config webpack.develop.config.js",
  	"publish": "webpack --config webpack.publish.config.js"
},

在命令中启动npm run develop就可以启动webpack构建文件。

2.3解决问题：每次新增代码或者修改代码都需要重新运行npm run develop，很麻烦

解决方案：有webpack-dev-server这样一个插件

1.安装webpack-dev-server     npm i webpack-dev-server  -save-dev  本地安装

2.在配置文件中修改“develop”：

{
 "scripts": {
 "develop": "webpack-dev-server  --config webpack.develop.config.js --devtool eval --progress --colors --hot --content-base src",
"publish": "webpack --config webpack.publish.config.js",
"watch": "webpack --config webpack.develop.config.js --watch --hot"
 }
}

这个插件帮我们启动了一个本地服务localhost：8080，--devtool eval为我的代码创建源地址，有任何报错的时候可以让我更加精确地定位到文件和行号，--progress显示合并代码的进度，--colors --hot命令行中的颜色 --content-base src（src指的是自己的输入目录）所有构建代码在服务器中可以访问到以src根目录启动的一个服务器。

3.再次运行npm run develop 运行完之后，再次访问页面不能本地访问，需要在地址栏输入localhost：8080访问页面。（运行完npm不要返回，保持当前的状态，当内容变化时，webpack就会自动构建了，成功之后，刷新页面即可，改完代码最好手动ctrl+s保存一下）

(1)用webpack-dev-server生成bundle.js文件是在内存中的，并没有实际生成

(2)如果引用的文件夹中已经有bundle.js就不会自动刷新了，你需要先把bundle.js文件手动删除

2.4解决问题：如何实现浏览器自动刷新

解决方案：webpack -dev-server可以解决

把webpack.develop.config.js文件中的entry改为数组

var path = require('path');

module.exports = {
    entry:[
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080',
        path.resolve(__dirname,'src/js/app.js')
    ],
    output: {
        path: path.resolve(__dirname, 'deploy'),
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
}

项目开发环境文件已修改，需要重新启动webpack   npm run  develop