webpack简单使用

vuejs技术

利用vue-resource来请求api
利用vue-router来实现路由
利用vue中的组件化思想来实现每个页面

webpack基本打包演示步骤

1、将webpack安装成为全局包，npm install webpack -g
2、在cmd控制面板中，调用webpack指令给定两个参数 要打包的文件路径 要输出的文件路径

例如 webpack main.js build.js

浏览器无法识别语法

无法识别require,modul.exports等语法,需要通过webpack打包工具打包

webpack.config.js文件

这个文件就是webpack的默认配置文件,默认的名称为:webpack.config.js,
将来只需要在cmd面板上执行webpack就会自动去查找webpack.config.js中的内容进行相关打包操作
module.exports = {
    entry:"要打包的文件,如./src/app.js",
    output: {
        path: "./bin",
        filename: "app.bundle.js"
    }

}

利用webpack打包css文件

1、本身不支持css打包，其实是加载相关的loader来进来不同文件的打包处理
2、打包css,需要依赖于style-loader和css-loader
步骤：0、使用npm init初使化
      1、利用npm安装好style-loader和css-loader
        1)利用npm init初始化一个package.json文件
        2）利用npm install style-loader css-loader --save-dev将这两个包在package.json中管理起来，
        将来就算这个项目中的包删除了，也只需要利用npm install这个指令将package.json文件中存在的包自动安装好即可
      2、在webpack.config.js中配置一下style-loader和css-loader，并且顺序一定是style-loader，再是css-loader
      3、调用webpack

自动补全浏览器内核

autoprefixer-loader作用：可以自动在打包过程中将css写法加上不同浏览器内核的前缀达到不同浏览器的兼容
使用步骤：1、安装npm install autoprefixer-loader --save-dev
         2、在webpack.config.js的css设定的地方，添加autoprefixer-loader，

注意要在style-loader和css-loader后面

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

1、npm install webpack webpack-dev-server-dev,也可以再安装一次全局npm install webpack-dev-server -g
2、安装 html-webpack-plugin  npm install html-webpack-plugin --save-dev(在内存中生成index.html，webpack-dev-server才能保证页面的实时刷新和打包)
3、配置webpack.config.js，在webpack.config.js最上方导入包var HtmlwebpackPlugin = require('htmll-webpack-plugin'),
plugins:[
    new HtmlwebpackPlugin({
        title:'index'//生成的页面标题
        filename:'index.html' //生成的文件名称
        template:'index1.html'//根据index1.html这个模板来生成（这个文件请你自己生成）
    })
]
4、在package.json中配置dev:
"scripts":{
    "dev":"webpack-dev-server --inline --hot --open --port 5200",
    "build":"webpack"
}
5、在项目目录下打开cmd面板执行npm run dev即可完成自动打开浏览器，并且自动刷新的功能

在package.json里面的scripts中配置一下运行的命令

"scripts":{
    "dev":"webpack-dev-server --inline --hot --open --port 5200"
}

--inline:自动刷新
--hot:热加载
--port指定监听端口为5200
--open:自动在默认浏览器中打开
--host:可以指定服务器的ip,不指定默认为127.0.0.1(localhost)

利用webpack将es6语法转换成es5语法

1、安装 npm install babel-core babel-loader babel-parset-es2015 babel-plugin-transform-runtime --save-dev
2、在webpack.config.js中的loader:[]中配置的参考格式：
    {
        test:/\.js$/,
        loader:'babel?pressets[]=es2015'
    }
利用webpack.config.js中的babel这个属性来配置会更好