俗话说一天不可以不学，今天就来学习一下，鼎鼎大名的webpack

      webpack的配置真的是让人发指的地步

   从这个坑中进入到另一个坑中，本篇文章可能有点长，请耐心看完

 

   众所周知，webpack是依附于node.js 的，所以在使用webpack之前需要先下载一个node，

     node中文网  点击打开链接

    安装完node之后，接下来就是今天的主角

      1 安装webpack

            打开命令窗口 执行  

             npm install webpack webpack-cli webpack-dev-server  -g

             这里建议大家使用cnpm

             cnpm install webpack webpack-cli webpack-dev-server  -g

       2  安装完成之后，你就可以小试一把

          创建文件结构如下

           src

                 index.js

           dist

                 index.html

        结构完成之后，在根目录下打开命令窗口，

         webpack4 提供了两个直接打包的方式分别是

               webpack  --mode=development      //用于开发环境    -》压缩出来的较大

               webpack --mode=production    //用于生产环境   -》压缩出来的较小

      执行完成之后，在dist文件夹中可以看到压缩过后的js

 

     3 使用 webpack.div.js

          上面的部分只是给咱们提供了一些简单的压缩js方式

          在实际的开发中，我们需要压缩css，html，lee等文件还是需要loader的配合，所以还是需要用到webpack.div.js

          下面开始webpack.div.js的配置，以及踩坑过程    

          一、先写出文件结构

                config

                     webpack.div.js 

                dist

                      index.html

                 src

                       main.js

二、配置压缩js的结构 

webpack.div.js                

    var path = require('path')    //node系统模块

module.exports = {         
entry: {
   main: './src/main.js'//入口文件
},       
mode: 'development',// 压缩模式
output: {  //输出配置
filename: '[name].js',    //输出名字配置【name】为原来的名字
path: path.resolve(__dirname, '../dist')   //输出的路径
}
}，
module: {
  rules：[
    //用来加载loader【loader是用来打包其他文件格式的】
   ]
}
}

三   loader配置

        css

                需要下载两个loader  

                          npm i css-loader style-loader

             在main中引入css  

                 require（./name.css） //一定加入./否则会报错

           loader配置       

 module: {
   rules: [{
     test: /\.css$/,
     use: [
      {
        loader: "style-loader"
      },
      {
        loader: "css-loader"
      }
    ]
     }]
}

     

           需要注意css 在HTML中的引入，需要output配合             

output: {
  filename: '[name].js',
  path: path.resolve(__dirname, '../dist'),
  publicPath: '/'
},

         在HTML中写入<script src="/main.js"></script>建议写到html下面引入

      HTML

            需要下载三个loader

                   npm i file-loader html-loader extract-loader 

             文件结构 

                          config 

                                   webpack.dev.js

                           dist

                           src

                                index.html

                                main.css

                                main.js

 

   config/webpack.dev.js 

                     

var path = require('path')  //node系统模块

module.exports = {  //暴露
entry: {   //入口文件
main: './src/main.js'
},
mode: 'development',  //开发模式 可使用production生产模式进行替换
output: {      //输出
filename: '[name].js',   //输出时文件名
path: path.resolve(__dirname, '../dist'),   //commonJs提供 文件名    -》输出路径
publicPath: '/'     //   html中的引入文件路径
},
devServer: {    //热跟新
contentBase: 'dist',    //服务器指向文件名。类似node中的静态资源加载
overlay:true //报错显示到浏览器
},
module: { //loader配置
rules: [{
test: /\.css$/,   // 正则css
use: [{
loader: "style-loader"   //渲染
},
{
loader: "css-loader"    //压缩
}
]
},
{
test: /\.html$/,  //正则 所有的html
use: [{
loader: "file-loader",  //文件输出
options: {  //名字
name: "[name].html"
}
},
{
loader: "extract-loader"  //与main.js分离，打包成一个独立的文件
},
{
loader: "html-loader",  //渲染，压缩
options: {
attrs: ["img:src"]
}
}
]
}

}

       

   src/index.html

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

</head>
<body>
<div id="box">

</div>
</body>
<script src="/main.js"></script>

</html>

    main/main.js代码         

requrie（'./main.css'）
requrie（'./html.css'）

   三，图片

         html中正常引入

        在loader配置中加入

{
test: /\.(jpg|git|png)$/,   //图片
use: [{
loader: "file-loader",
options: {
name: "[name]-[hash:8].[ext]"  //压缩为一个名字8位哈希值的图片
}
}]
}

   -----------------------------------------------------------------------------------------------------------

  以上属性webpack的基本操作，下面使用webpack实现vue开发环境的搭建

              文件结构

                    config

                             webpack.dev.js

                    dist

                              index.html

                    ser

                            main.js

                            app.vue

config/webpack.dev.js

           

var path = require('path')  //node系统模块
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //vue-loader 伴生插件 
module.exports = {  //暴露
entry: {   //入口文件
main: './src/main.js'
},
mode: 'development',  //开发模式 可使用production生产模式进行替换
plugins: [
new VueLoaderPlugin()   //vue-loader的VueLoaderPlugin
],
output: {      //输出
filename: '[name].js',   //输出时文件名
path: path.resolve(__dirname, '../dist'),   //commonJs提供 文件名    -》输出路径
publicPath: '/'     //   html中的引入文件路径
},
devServer: {    //热跟新
contentBase: 'dist',    //服务器指向文件名。类似node中的静态资源加载
overlay:true //报错显示到浏览器
},
resolve: {    //引入vue.js
alias: {
'vue$': 'vue/dist/vue.js'
}
}, 
module: { //loader配置
rules: [{
test: /\.css$/,   // 正则css
use: [{
loader: "style-loader"   //渲染
},
{
loader: "css-loader"    //压缩
}
]
},
{
test: /\.html$/,  //正则 所有的html
use: [{
loader: "file-loader",  //文件输出
options: {  //名字
name: "[name].html"
}
},
{
loader: "extract-loader"  //与main.js分离，打包成一个独立的文件
},
{
loader: "html-loader",  //渲染，压缩
options: {
attrs: ["img:src"]
}
}
]
},
{
test: /\.(jpg|git|png)$/,   //图片
use: [{
loader: "file-loader",
options: {
name: "[name]-[hash:8].[ext]"  //压缩为一个名字8位哈希值的图片
}
}]
},
{
test: /\.vue$/,   //压缩vue
use: [{
loader: "vue-loader"  //压缩vue的loader
}],
exclude: '/node_modules/'    // 排除压缩的文件
}
]
}

}

           

dist/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

</head>
<body>
<div id="box">
<app></app>
</div>
</body>
<script src="/main.js"></script>

</html>

src/app.vue

<template>
<div>
我是{{a}}  
</div>
</template>


<script>
export default {
name: 'app',
data:function(){
return {
a:'小渣渣'
}
}
}
</script>


<style>

</style>

ser/main.js

 import Vue from 'vue'
 import app from "./app.vue"

new Vue({
   el:'#box',
    components:{
    app
    }
   }

)

 

github地址：https://github.com/wangchaogang/webpack-vue.git

 

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue