webpack

webpack 3.8.1版本

1.webpack是一个前端资源加载或打包工具。资源：img CSS js json等

　（1）下载

　　　　npm install webpack@3.8.1 --save -dev 局部下载

　　　　npm install -g webpack@3.8.1 全局下载

　　　　我们尽量全局和局部都安装

　（2）打包js文件

　　　　指令 webpack 入口文件 出口文件

　　　　webpack js/1.js  dist/bundle.js

　　　　如果我们只想使用webpack这个指令 就完好打包 就需要配置webpack.config.js

　　　　webpack会有一个默认的配置文件叫webpack.config.js 指令就是简单的webpack就可以了

　　　　*配置文件插件：webpack.config.js

　　　　　　module.exports={

　　　　　　　　entry:"./runoobl.js"

　　　　　　　　output:{path:__dirname,filename:"bundle.js"},

　　　　　　　　module:{

　　　　　　　　　　loaders:[

　　　　　　　　　　{

　　　　　　test:/.css$/,

　　　　　　loader:"style-loader!css-loader"

}

　　]

　 }

　　}

　（3）添加热加载 改变文件内容 按住Ctrl+S 就会自动刷新

　　　　注意：webpack是3.8.1 这个轻量级服务器就得是2.9.4，如果webpack是4.0版本，这个dev-server就得是3.0版本

　　　　　全局下载webpack-dev-server  npm install -g webpack-dev-server@2.9.4

　　　　　在开发环境下下载 npm i --save-dev webpack-dev-server@2.9.4

　　　　　直接使用webpack-dev-server 启动就行

　　　　　但是这种启动只是启动服务器 但是不能自动刷新

　　　　　另一种启动 webpack-dev-server --hot --inline 既可以启动服务器，也可以让浏览器自动刷新

　　　　　配置启动指令

　　　　　　在当前项目下的package.json中将

　　　　　　　

　　　　　　　　注意的就是在这个服务器下生成的虚拟bundle.js

　　　　　　　　这个虚拟js文件由配置文件决定的。但是它是和app.html同目录同级别关系。所以引入关系需要注意。

　　　　　　　　

　　　　打包CSS文件

　　　　　　loader：依赖包

　　　　　　　　CSS转成js less转成js而loader就是解决这些问题的。

　　　　　　　　CSS文件打包到js中 需要css-loader style-loader

　　　　打包json文件

　　　　打包img图片