webpack安装和基本使用

solitudeYu
226 阅读3分钟

webpack中文文档：www.webpackjs.com/ ###1.安装node.js 中文网站：nodejs.cn/download/

image.png
选择add to path 安装并添加到环境变量当中 ###2.安装webpack

全局安装 webpack 命令：

npm install -g webpack

安装特定版本 webpack（比如 3.x.x）：

npm install -g webpack@3

看 webpack 是否安装成功（下面命令都可以）：

webpack -v

webpack --version

-------------------------》》》如果安装慢可以使用淘宝镜像安装 1）npm install -g cnpm --registry=https://registry.npm.taobao.org 2）npm install -g webpack@3 ###3.webpack打包文件 1）vs code创建一个工作区

image.png

2）在src下面创建两个js文件 index.js

function add(num1, num2) {
    return num1 + num2;
}

export default {
    add
}

main.js中引入index.js文件

import math from './js/index'; 

console.log(math.add(20, 30));

//依赖css文件
import './css/index.css';

//依赖less
import './css/special.less';

index.html中引入bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hello word!</h1>
    <script src="./dist/bundle.js"></script>
</body>
</html>

3）创建webpack.config.js文件（名字为固定写法）



//path为node管理的，当前项目路径
const path = require('path')


module.exports = {
    //入口文件
    entry: './src/main.js',
    //出口文件
    output: {
        path: path.resolve(__dirname, 'dist'),
        //resolve路径拼，输出路径拼接为项目下面的dist.js文件
        //__dirname前面为双下划线
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                //css-loader只负责将css文件进行加载
                //style-loader负责将样式添加到DOM中
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            }
        ]
    }
}

4）运行npm init指令

image.png
package name ：项目名称全英文 选择ok会生成package.json文件

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

5）运行npm install命令会生成关于node的一些依赖文件

image.png
6）自定义命令 实际项目中使用npm run dev,npm run build,npm run serve 这些命令对应的是package.json文件中的script
image.png
创建一个build属性，值为webpack，运行npm run build在dist文件夹下会同样生成bundle.js文件 #####------------>>>执行npm run build会优先当前项目下寻找webpack，所以就会有局部webpack的定义，如果局部和全局的版本不一致，会出现打包错误的情况 7）本地安装webpack 命令：npm install webpack@3.6.0 --save-dev 会生成一个node_modules文件夹
image.png
package.json文件

{
  "name": "test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  //开发时依赖
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

8）添加css的插件 命令：npm install --save-dev css-loader npm install style-loader --save-dev 9）使用less文件模块 命令：npm install --save-dev less-loader less 10）使用图片文件模块 命令：npm install --save-dev url-loader

{
               test: /\.(png|jpg|gif)$/,
               use: [
                   {
                       loader: 'url-loader',
                       options: {
                           //当加载时图片小于limit，会将图片编译成base64编码格式
                           limit: 50000
                       }
                   }
               ]
           }

如果当加载图片的体积大于limit会报错，如下：

image.png
处理方式： ①添加命令（将图片打包到dist文件夹下）：npm install --save-dev file-loader
image.png

执行命令后代码不报错，但是页面中会出现url地址引用不正确的问题

image.png
image.png

②在webpack.config.js文件中添加属性（将所有图片的引用地址指向dist文件夹下编译后的base64图片）

image.png

③将图片打包到固定的文件夹下，名字保持不变在options添加name属性 [name]为图片自身名字 [hash:8]哈希算法的随机数避免图片重复 [ext]图片原格式

image.png
生成图片格式
image.png
④ES6转ES5的bable 命令：npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env


//path为node管理的，当前项目路径
const path = require('path')


module.exports = {
    //入口文件
    entry: './src/main.js',
    //出口文件
    output: {
        path: path.resolve(__dirname, 'dist'),
        //resolve路径拼，输出路径拼接为项目下面的dist.js文件
        //__dirname前面为双下划线
        filename: 'bundle.js',
        publicPath: './dist/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                //css-loader只负责将css文件进行加载
                //style-loader负责将样式添加到DOM中
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //当加载时图片小于limit，会将图片编译成base64编码格式
                            //默认8kb大小
                            limit: 8192,
                            name: './img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}

###4.webpack使用vue的配置过程 ①.安装vue 命令npm install vue --save ②.导入vue

//使用vue
import Vue from 'vue'
new Vue({
    el: "#app",
    data: {
        message: "hello webpack!!!"
    }
})

③.如果运行时报错如下，就是配置vue的版本不正确

image.png
解决方法：webpack.config.js中配置如下

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
    }
  }
}

④配置webpack解析template模板 命令：cnpm install --save-dev vue loader vue-template-compiler 重新安装npm：cnpm install webpack.config.js配置module

image.png
配置package.json
image.png
⑥创建vue文件

<template>
  <div>
    <h2>{{message}}</h2>
    <h5 class="title">{{name}}</h5>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: "宝贝！！！！",
      name: "南瓜"
    };
  }
};
</script>
<style scoped>
    .title{
        color: orangered;
    }
</style>

⑦main.js引入

import App from './vue/app.vue'
new Vue({
    el: "#app",
    data: {
        message: "hello webpack!!!"
    },
    template:"<App/>",
    components:{
        App
    }
})
avatar
文章
阅读
粉丝