webpack

 

  1. 安装babel-loader
    npm install babel-core@6.24.0 babel-loader@6.4.1 babel-preset-es2015@6.24.0 babel-plugin-transform-runtime@6.23.0 --save-dev

    1. 配置webpack.config.js文件

      {

       test: /.js$/,  // 将.js文件中的es6语法转成es5语法
       loader:'babel-loader',
       exclude:/node_modules/ // 排除node_modules文件夹下的js文件不用被转换
      

      }

    2. 配置babel的转码规则

      babel:{

       presets:['es2015'],  // 配置将es6语法转换成es5语法
       plugins:['transform-runtime'] // 用来解析vue文件
      

      }

二、初始化一个node js模块

1. 安装相关包
`npm install vue vue-loader@11.3.4 vue-template-compiler babel-plugin-transform-runtime@6.23.0 --save-dev`

2. 配置webpack.config.js文件
{
        test: /.vue$/,  // 解析 .vue 组件页面文件
        loader:'vue-loader' 
}

 

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

金沙官网线上 1

url-loader是进行url资源的解析

二、在webpack.config.js配置文件中配置loader,如下:

  1. 全局安装 nrm: npm install nrm -g

    1. 查看镜像源 nrm ls
    2. 切换淘宝镜像源 nrm use taobao
    3. 全局安装webpack npm install webpack@1.14.0 -g
      2.4. webpack 进行代码打包

    导出一个模块 module.exports = 需要导出的对象

    导入一个模块 var 模块名 = require(文件路径)

    webpack 打包命令
    webpack 需要打包的文件名 输出的文件名

    例如:
    webpack main.js build.js
    2.5. webpack 配置文件

    1. 默认配置文件名称webpack.config.js

    module.exports = {
    entry:'需要打包的文件' // 路径+文件名 一般为 ./src/xxx.js
    output:{
    path:'输出文件的路径' // 绝对路径 使用__dirname + 路径
    filename:*输出文件的名称* // 一般都为build.js/bundle.js
    }
    }

    1. 使用webpack进行打包
      • 如果是默认配置文件 则直接在命令行中 输入 webpack
      • 如果是其他改过名字的配置文件 则使用 webpack --config 配置文件名
        2.6. webpack loader的使用

 

2.8. 使用webpack以及npm创建项目

处理vue组件语法

  1. 安装scss-loader
    npm install less less-loader style-loader css-loader --save-dev

    2.配置scss-loader loaders:[

                 {
                         test: /.less$/,
                         loader:'style-loader!css-loader!less-loader'
                 }
         ]
    

npm install webpack webpack-cli --save-dev

babel-loader是用来将es6语法转换成es5语法

二、在webpack.config.js配置文件中配置如下,还有很多选项可以参考htmlwebpackplugin官网配置

css-loader 是进行css解析,能够使浏览器正常识别js文件中导入的 css 文件

npm install vue-loader vue-template-compiler --save-dev

less-loader是进行less文件的解析

什么是webpack

sass-loader是进行scss文件的解析

 金沙官网线上 2

1. 创建项目文件夹

2. 创建npm的配置文件package.json

npm init -y

3. 创建webpack配置文件(webpack.config.js)

4. 根据项目需求安装所需要使用的模块

npm install 包名 --save-dev

 

2.6.3. less-loader 的使用

 

// 1.0 导入vue核心包
// 凡是使用npm安装的包 引入的时候都不需要写相对路径 只需要写包名即可
import Vue from 'vue';

// 2.0 导入App.vue的vue对象
import App from './App.vue';

// 3.0 利用Vue对象进行解析渲染
new Vue({
        el:'#app',
        render:function(create){return create(App)} //es5的写法
        // render:c=>c(App)  // es6的函数写法 =>:goes to
});

Webpack是一个现代JavaScript应用程序的静态模块打包器。它把你的项目当做一个整体,通过给定的入口文件开始找到你的项目所有依赖模块,使用loaders处理它们,最后打包为一个或多个浏览器可识别的JavaScript文件,可以减少页面请求,优化网页性能。

2.6.2. sass-loader 的使用

下面是我的目录结构(除了node_modules和package.json是自动生成的,其他文件都要手动添加)

2.6.6. babel-loader的使用

金沙官网线上 3

2.7.3. 项目入口文件main.js中渲染组件

安装loader允许webpack处理那些非javascript文件(webpack自身只能处理javascript),将对应类型的文件转换为webpack能够处理的模块。

  1. 安装sass-loader
    npm install node-sass sass-loader style-loader css-loader --save-dev

    2.配置sass-loader loaders:[

                 {
                         test: /.scss$/,
                         loader:'style-loader!css-loader!sass-loader'
                 } 
         ]
    

五、在终端中运行 npm run build 就可以在dist文件夹下生成打包后的bundle.js文件

1. 安装webpack-dev-server

npm install webpack@1.14.0 webpack-dev-server@1.16.0 --save-dev

2. 安装自动生成HTML文件的插件
npm install html-webpack-plugin@2.28.0 --save-dev

3. 修改package.json文件

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

4. 配置webpack.config.js中的内容

- 引入html-webpack-plugin
        `var htmlWP = require('html-webpack-plugin');`
- 在modul.exports中加入
         plugins:[
                new htmlWP({
                        title: '首页',  //生成的页面标题
                        filename: 'index.html', //webpack-dev-server在内存中生成的文件名称,自动将build注入到这个页面底部,才能实现自动刷新功能
                        template: 'template.html' //根据template.html这个模板来生成(这个文件程序员自己书写)
                })
        ]

5. 运行 npm run dev

HtmlWebpackPlugin:自动生成html文件(index.html),也可以根据给定的模板文件在他的基础上来生成新的html文件,而且会在文件中自动引用webpack生成的bundle.js文件。

2.7.2. .vue文件基本代码结构

一、安装HtmlWebpackPlugin:

2.6.5. webpac-dev-server的使用

1、创建一个目录并在终端中进入当前目录执行npm init -y

一个.vue文件就是一个vue的组件
// 1. 组件模板
<template>
<div>

 

2.7. webpack解析vue文件

金沙官网线上 4

  1. 初始化package.json
    npm init

    1. 安装css-loader以及style-loader npm install style-loader css-loader --save-dev

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

       module:{
               loaders:[
                       {
                               test: /.css$/,
                               loader:'style-loader!css-loader'
                       }
               ]
       }
      

vue-loader:是一个vue加载器,能够将独立的vue组件编译成javascript模块

  1. 安装url-loader
    npm install file-loader url-loader --save-dev

    金沙官网线上, 2.配置url-loader loaders:[

                 {
                         test: /.(png|jpg|gif|ttf)$/,
                         loader:'url-loader!limit=20000&name=images/[hash:8].[name].[ext]'
                         // limit单位是字节 1kb = 1024b(字节)
                         // 对于比较小的图片资源可以使用limit进行限制 
                         // 小于limit值转换成base64字符串内嵌到js代码中
                         // 大于limit值的图片才转成URL进行网络请求
                 }
         ]
    

style-loader:将css-loader处理后的样式注入到html的head内

loader:预处理器。在js代码执行之前需要执行的一些处理。
2.6.1. css-loader

处理es6/7语法

2.7.1. 安装vue-loader解析.vue文件

四、在package.json文件中添加一个npm脚本,这样运行本地的webpack比较方便

2.6.4. url-loader 的使用

如何使用Webpack处理除javascript以外的文件

// 2. 负责导出vue的对象
<script>
        // 负责导出 .vue这个组件对象(它本质上是一个Vue对象,所以Vue中该定义的元素都可以使用)
        export default{  // es6的导出对象的写法
                data(){  //等价于 es5的 data:function(){
                        return {
                                msg :'hello vuejs'
                        }
                },
                methods:{

                },
                created(){

                }
        }
</script>

// 3. 书写组件内部的样式
<style scoped>
// scoped表示这个里面写的css代码只是在当前组件页面上有效,不会去影响到其 他组件页面
        .red{
                color: red;
        }
</style>

自动生成html文件

二、在webpack.config.js配置文件中配置loader,如下:

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

本文由金沙官网线上发布于Web前端,转载请注明出处:webpack

您可能还会对下面的文章感兴趣: