webpack使用步骤

web pack是一个前端资源模板管理的打包工具,它可以将css,js,image,vue等文件当做一个模块,自动处理内部的依赖关系,依照指定的规则进行打包,最终将这些资源输出到一个统一的.js文件中,将来在系统中只需要请求这个打包好的js文件即可完成所有的功能

一.特点:

1.loader;

web pack自身自能处理JavaScript类型的文件,如果要处理其他类型的文件,就需要loader(加载器)进行转换.loader可以看成是模块与静态资源的转换器,他自身也是一个函数,接收源文件作为参数,返回转换后的结果

2.plugin

plugin可以完成更多loader不能完成的功能,插件的存在使得webpack非常灵活

二.使用步骤

1.全局安装webpack===>npm install webpack -g

2.在当前项目中安装webpack===>npm install webpack --save

3.利用webpack打包CSS文件

打包css文件需要依赖style-loader/css-loader,利用npm安装.npm install style-loader css-loader --save-dev;在webpack.config.js文件中进行配置的时候,loader:'style-loader!css-loader'.style-loader放在前面,与CSS-loader中间中"!"分隔开

4.利用webpack-dev-server和html-webpack-plugin实现页面刷新和自动打包

(1)html-webpack-plugin这个插件可以自动生成一个index.html文件在内存中,只有个这样web pack-dev-server才能实现实时刷新页面和实时打包

a).安装:npm install html-webpack-plugin  --save-dev

b).在webpack.config.js文件中导入 var HtmlWebpackPlugin=require('html-webpack-plugin');

Plugins:[

new HtmlWebpackPlugin({

       title:'生成页面的标题'

       filename:'index.html'//生成页面的文件名称

       template:'index.html'//根据这个模板来生成上面的文件

})

]

c).安装npm install webpack webpack-dev-server --save-dev 

d).在package.json中的''scripts'':{

     "dev":"webpack-dev-server --inline --hot --port 端口号 --open"

     "build":"webpack"

}

e).输入指定npm run dev即可自动打开浏览器,端口号即为你自己配置的端口号

webpack相关参数:

--inline:自动刷新

--hot:热加载和inline配合使用

--port 端口号

--open:自动在浏览器中打开

--host:可以指定服务器的ip,不指定默认为Localhost127.0.0.1

5.将es6语法转换为es5语法

安装的包:npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev

在webpack.config.js文件中进行配置

a).在loader中{

      test:/.\.js$/,

      loader:'babel'

       exclude:/node_modules/==>忽略这个文件的编译

}

b).在babel属性中

babel:{

      presets:['es2015'],

       plugins:['transform-runtime']

}