webpack

Webpack 3.8.1版本

  是一个前端资源加载或者打包工具。资源 img css js json 等

第一步 :下载

    npm install webpack@3.8.1 全局下载

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

    

 

    全局和局部尽量都安装

第二步:打包js文件

  指令webpack 入口文件(被打包文件) 出口文件(打包文件)

  webpack js/a js dist/bundle.js

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

  webpack会有一个默认的配置文件的路径叫webpack.config.js

  

 

第三步:

  添加热加载改变文件内容 按住保存 就会自动刷新

  webpack-dev server@2.9.4

  注意webpack是3.8.1这个轻量服务器就得是2.9.4 

  如果是4.0版本这个dev-server就得是3.0版本

  dev-server始终比webpack低一个版本

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

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

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

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

  另一种方法 webpack-dev-server --hot -inline

  既可以启动服务器 也可以让浏览器自动刷新

  配置启动指令

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

    "script":{webpack-dev-server --hto --inline}

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

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

第四步:打包css文件

  loader:依赖包

    css转成js less转成js

    json转成JS png转成JS而loader就解决了这些问题

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

    npm install style-loader css-loader --save -dev

      

posted @ 2019-06-04 19:33  逐梦醉伊人  阅读(83)  评论(0编辑  收藏  举报