webpack初识

webpack是一个资源打包工具，可将js，css，images等静态资源当作模块打包，每个模块有个相应loader来实现。

一、安装webpack

1.安装nodejs环境

2.安装webpack：在对应文件夹中的cmd命令行中输入npm i webpack

二、webpack 指令学习

1.webpack打包js文件

webpack main.js build.js（将main.js打包成build.js）当改变原来main.js时需要重新打包

三、webpack配置文件的使用

1.配置文件：webpack.config.js

2.新建上述文件：

module.exports={

    entry:'./src/main.js', //指定打包的入口文件

    output:{

        path:__dirname+'/dist',//打包文件存放地址，注意webpack 1.14.0要求绝对路径

        filename:'build.js'

    }

}

3.在文件终端cmd命令中直接输入webpack，就会打包文件main.js，打包成build.js存放在文件路径中。

四、webpack打包css

1.webpack本身不支持css、image、less等资源打包，需要loader来实现

 

//删除node_modules，在终端中输入npm init；cssloader（自己起的名字）;回车，就会生成一个package.json文件，就可以保存你通过npm安装的第三方包的名字。

 

2.安装css-loader和style-loader：

npm i css-loader style-loader --save-dev

此时在package.json中就会出现

"devDependencies": {

    "css-loader": "^4.2.0",

    "style-loader": "^1.2.1"

  }

当删除了第三方包时，直接文件命令行中输入npm install，就可以重新安装，这样可以减少项目体积。

3.配置

{

                test:/\.scss$/,  //打包scss文件

                loader:'style-loader!css-loader!sass-loader'

}

4.新建css文件，在main.js中导入css文件：require('css文件路径');

启动命令行，webpack此时报错TypeError: this.getResolve is not a function；

原因package.json文件中的css-loader版本太高，改为2.0.2；重新在命令行中输入：npm i；webpack；打包成功。

此时刷新页面，已经可以成功加载样式。

五、webpack打包sass文件

1.安装

cnpm i node-sass sass-loader css-loader style-loader --save-dev 

2.配置

{

                test:/\.scss$/,  //打包scss文件

                loader:'style-loader!css-loader!sass-loader'

}

3.建立sass文件，导入main.js

4.打包

webpack;此时build.js多了模块，刷新页面，样式生效

六、webpack打包less文件

1.安装 npm i less-loader --save-dev

  

2.配置

{

                test:/\.less$/,  //打包scss文件

                loader:'style-loader!css-loader!less-loader'

}

3.建立less文件，导入main.js

4.打包

webpack;此时build.js多了模块，刷新页面，样式生效

TypeError: loaderContext.getResolve is not a function,将less版本改为4.1.0

 

七、使用webpack打包url资源

1.安装：npm i url-loader file-loader --save-dev

2.配置

{

                test:/\.(png|jpg|gif)$/,  //打包img文件

                loader:'url-loader?limit=40000'   //限制图片大小

}

3.在css中使用图片资源

4.打包

八、使用webpack-dev-server

1.安装 npm i webpack@1.14.0 webpack-dev-server@1.16.0 html-webpack-plugin --save-dev

2.webpack.config.js配置

var htmlwp = require('html-webpack-plugin') ;

 

plugins:[

        new htmlwp({

            title:'首页',

            filename:'index1.html',

            template:'index.html'

        })

    ]

3.在packa.js中加入：

"scripts":{

       "dev":"webpack-dev-server --inline --hot --open --port 4009"

}

 九、webpack中es6转es5

1安装：npm i babel-core babel-loader babel-preset-es2015 babel-plugin-transform-runtime --save-dev

2webpack.config.js配置：

{

                test:/\.js$/,  //将   .js文件中的es6语法改为es5

                loader:'babel-loader',

                exclude:/node_modules/ // 不包括node_modules文件夹下的js文件

}

babel:{

        presets:['es2015'],  //将es6转为es5

        plugins:['transform-runtime']

}

3.修改语法

4.npm run dev 

十、webpack打包和解析组件页面

1.安装：

cnpm i vue-loader vue-template-compiler --save-dev

cnpm i vue --save

2.webpack.config.js配置：

{

                test:/\.vue$/,  //解析.vue组件页面文件

                loader:'vue-loader'

            }

3.新建app.vue文件

代码如下：

<!-- 以后项目的根组件 -->

<template>

<!-- 1.0 template主要是放html元素的（html的页面结构） -->

<span v-text='msg' class="red"></span>

</template>

<script>

// 负责导出  .vue这个组件对象(他本质上是个Vue对象，所以Vue中该定义的元素都可使用)

    Vue.component('ddd',{

        template:'#id'

    })

    export default{

        data(){   //等价于data:function()

            return{

                msg:'hello msg'

            }

        },

        methods:{

        },

        created(){

        }

    }

</script>

<style scoped>

/* 当前页面的css样式写在这里，其中scoped表示这个里面写的css代码只是在当前组件页面上有效，

不会去影响到其他组件页面 */

.red{

    color: red;

}

</style>

4.修改main.js代码：

// 1.0导入vue核心包

import vue from 'vue';

// 2.0导入App.vue的vue对象

import App from './App.vue';

// 3.0利用Vue对象进行解析渲染

new Vue({

    el:'#app',

    // render:function(create){create(App)} es5的写法

    render:c=>c(App)  //es6的写法 =>: goes to

})