精华内容
下载资源
问答
  • 2021-05-12 11:24:01

    webpack

    1.创建项目并在终端初始化

    npm init -y
    

    在项目目录下回生成一个package.json文件

    2.在项目目录下创建src文件夹,在src目录下创建index.html文件和index.js文件

    index.html内容为:

    <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    

    3.在终端安装jQuery

    npm install jquery -S
    //npm i jquery	 建议这样写
    

    会在项目目录下生成一个package-lock.json文件和node_modules文件夹(这个文件夹可以删掉,后续需要的话可以重新下载,命令:npm i

    4.向index.js填充内容,并实现功能

    导入jQuery
    import $ from "jquery"
    
    index.js内容
    import $ from "jquery";
    $(function () {
        $("li:odd").css("background", "pink");
        $("li:even").css("background", "orange");
    })
    
    在index.html内导入index.js
    <script src="./src/index.js"></script>
    

    src路径按照自己创建的路径为准

    浏览器报错:

    Uncaught SyntaxError: Cannot use import statement outside a module
    

    安装webpack的原因:

    因为**import $ from “jquery”**是ES6的语法代码,浏览器存在兼容性问题,所以需要安装webpack,将高版本的语法编程浏览器可以识别的语法,webpack只能打包js文件

    安装webpack步骤:

    1.在终端输入命令:

    npm install webpack webpack-cli -D
    //若有报错就试试把-D改为-g
    

    2.在项目根目录下创建一个webpack.config.js的配置文件来配置webpack。

    向webpack.config.js添加内容:
    module.exports = {
    	mode:"development",
    }
    
    mode设置的是项目的编译模式,可以设置的两个值:

    development(开发模式):表示项目处于开发阶段,不会进行压缩和混淆,打包速度会快一些

    production(发布模式):表示项目处于发布阶段,会进行压缩和混淆,打包速度会慢一些

    3.向项目目录下的package.json文件添加运行脚本dev:

    "scripts":{
    	"dev":"webpack"
    }
    

    这个dev是自定义命名的

    4.运行dev命令进行项目打包

    在终端输入命令,将会启动webpack进行项目打包

    这里的dev是第三步里面的dev,第三步命名什么这里的就是什么

    npm run dev
    

    成功后会在项目目录下成成一个dist文件夹,文件夹下有一个main.js文件

    在index.html中修改导入的js文件
    <script src="../dist/main.js"></script>
    

    页面效果渲染正确

    在此之前,修改之后,都要用npm run dev进行打包,打包之后,效果才会改变

    设置webpack的打包入口/出口

    在webpack 4x中,

    会默认将src/index.js作为默认的打包入口js文件;

    会默认将dist/main.js作为默认的打包输出js文件;

    如果不想使用默认的入口/出口js文件,可以通过改变webpack.config.js来设置入口/出口的js文件:
    const path = require("path");
    module.exports = {
        // development开发模式、production发布模式
        mode: "development",
        // 设置入口文件路径
        entry: path.join(__dirname, "./src/index.js"),
        // 设置出口文件
        output: {
            // 设置路径
            path: path.join(__dirname, "./dist"),
            // 设置文件名
            filename: "bundle.js"
        }
    }
    

    设置webpack的自动打包

    修改js文件中的代码后,需要重新运行命令npm run dev打包webpack,才能生成出口的js文件

    1.安装自动打包功能的包:webpack-dev-server

    在终端输入:

    npm install webpack-dev-server -D
    

    2.修改package.json中的dev指令

    "scripts": {
        "dev": "webpack-dev-server"
      },
    

    webpack-dev-server自动打包的输出文件(bundle.js),默认放到了服务器的根目录下

    自动打包完毕后,默认打开服务器网页

    解决:在package.json中的dev指令

    webpack 5与webpack-dev-server 3 兼容性问题

    "scripts": {
        "dev": "webpack serve --open Chrome.exe"
      },
    

    在这里可能会出现:

    [webpack-cli] Would you like to install 'webpack-dev-server' package? (That will run 'npm install -D webpack-dev-server') (Y/n)
    

    Y,然后回车就可以了

    在终端执行npm run dev后,会自动跳转到浏览器

    浏览器默认访问的地址为:http://localhost:8080/

    3.修改index.html中js文件的路径

    bundle.js会保存到内存里面(在根目录下面),而不是在dist文件夹下面的那个

    <script src="/bundle.js"></script>
    

    在此之后,修改相关文件后,保存即可,不用再执行命令npm run dev,也不用跳转到浏览器去,会自动跟随保存更新的

    但是这里一开始浏览器打开的是项目目录页面(文件和文件夹),而不是index.html页面,需要自行点开src文件夹才打开index.html页面

    生成预览页面——html-webpack-plugin

    在内存里面(根目录)生成一个预览页面而不是在本地生成

    实现步骤:

    1.安装默认预览功能的包:html-webpack-plugin

    npm install html-webpack-plugin -D
    

    2.修改webpack.config.js文件:

    //导包
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    // 创建对象
    const htmlPlugin = new HtmlWebpackPlugin({
    //是键值对,用:相连的,而不是用=号,后面加逗号
        // 设置生成预览页面的模板文件
        template: "./src/index.html",
        // 设置生成的预览页面名称
        filename:"index.html",
    })
    module.exports = {
        ......
        plugins: [htmlPlugin]
    }
    

    设置完,npm run dev之后打开的就是index.html页面了

    webpack中的加载器(loader)

    通过loader打包非js模块:在默认情况下,webpack只能打包js文件,如果下载想要打包非js文件,需要调用loader加载器才能打包

    loader加载器包含:

    1).less-loader:处理less文件

    2).sass-loader

    3).url-loader:打包处理css中与url路径有关的文件

    4).babel-loader:处理高级js语法的加载器

    5).postcss-loader

    6).css-loader,style-loader

    **注意:**指定多个loader时的顺序是固定的,而调用loader的顺序是从后往前进行调用的

    安装style-loader,.css-loader来处理样式文件

    1.安装包

    在终端输入

    npm install style-loader css-loader -D
    
    2.配置规则:更改webpack.config.js的module中的rules数组
    plugins: [htmlPlugin],		//这是前面添加过的
        module: {
            rules: [{
                // test设置需要匹配的文件类型,支持正则\.是.,前面的\是解析的意思,$是文件名一定要是.css结尾
                test: /\.css$/,
                // use表示该文件类型需要调用的loader(加载器)
                use: ['style-loader', 'css-loader'],
            }]
        }
    

    在项目目录下的src文件夹下面创建一个css文件夹,在css文件夹下面创建一个index.css文件,自行添加内容

    在入口文件index.js中引入(导入)index.css文件

    import "./css/index.css";
    

    因为导入的是一个文件,所以不用from

    最后在终端执行npm run dev 命令即可

    安装less,less-loader,来处理less文件

    1.安装包
    npm install less-loader less -D
    
    2.配置规则:更改webpack.config.js的module中的rules数组
    rules: [
                // 这里是css文件的配置规则
                {
                    // test设置需要匹配的文件类型,支持正则
                    test: /\.css$/,
                    // use表示该文件类型需要调用的loader(加载器)
                    use: ['style-loader', 'css-loader'],
                },
                // 这里是less文件的配置规则
                {
                    test: /\.less$/,
                    use: ['style-loader', 'css-loader', 'less-loader'],
                }
            ]
    

    在css文件夹下创建一个index.less文件,自定义内容为:

    ul{
        li{
            color: white;
        }
    }
    

    在index.js中导入index.less文件

    import "./css/index.less";
    

    最后在终端执行npm run dev 命令即可

    安装sass-loader,node-sass处理scss文件

    1.安装包
    npm install sass-loader node-sass -D
    

    这一步可能会失败会报错(因为npm是从国外拿数据的),解决方案如下:

    解决方案一:

    设置全局镜像源:

    npm config set sass_binary_site https://npm.taobao.org/mirrrors/node-sass/
    

    然后再重新安装

    npm install sass-loader node-sass -D
    

    解决方案二:

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    

    然后再执行命令:

    cnpm install sass-loader node-sass --save-dev
    

    解决方案三:

    安装python,安装目录必须在C:/Python27

    然后执行命令:

    cnpm install sass-loader node-sass --save-dev
    
    2.配置规则:更改webpack.config.js的module中的rules数组
     module: {
            // rules里面存放的是对象
            rules: [
                // 这里是css文件的配置规则
                {
                    // test设置需要匹配的文件类型,支持正则
                    test: /\.css$/,
                    // use表示该文件类型需要调用的loader(加载器)
                    use: ['style-loader', 'css-loader'],
                },
                // 这里是less文件的配置规则
                {
                    test: /\.less$/,
                    use: ['style-loader', 'css-loader', 'less-loader'],
                },
                // 这里是scss文件的配置规则
                {
                    test: /\.scss$/,
                    use: ['style-loader', 'css-loader', 'sass-loader'],
                }
            ]
        }
    

    在css文件夹下创建index.scss文件(后缀名一定是scss,而不是sass),自定义内容:

    ul {
        li{
            border: 1px solid blue;
            margin: 10px auto;
        }
    }
    

    在index.js中引入index.scss文件

    import "./css/index.scss";
    

    最后在终端执行npm run dev 命令即可

    打包样式表的图片以及字体字体

    使用url-loader和file-loader来处理

    1.安装包
    cnpm install url-loader file-loader -D
    

    如果在这里报错的话,就试试先执行下面的命令再进行安装,

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    2.配置规则:更改webpack.config.js的module中的rules数组
    // 图片的配置规则
                {
                    // 设置图片的后缀名
                    test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                    // limit用来设置字节数,只有小于limit值的图片,才会转换
                    use: "url-loader?limit=16940",
                }
    

    在index.html中添加一个div

    <div class="box">
    
        </div>
    

    在index.css中添加相关样式

    .box {
      width: 200px;
      height: 200px;
      border: 1px solid firebrick;
      background-image: url(../img/sortPhone_03.png);
    }
    

    最后在终端执行npm run dev 命令即可

    如果在index.html中直接添加图片,浏览器中是不显示的

    <img src="./img/sortPhone_03.png" alt="">
    

    因为装了插件,所以图片到内存里面去了,地址就要改一改

    <img src="/src/img/sortPhone_03.png" alt="">
    

    最后在终端执行npm run dev 命令即可

    打包js文件中的高级语法

    如果是webpack 4版本的话,可能要装一下,如果是5的话,可以不用搞这一步

    安装babel系列的包

    1.安装babel转换器
    npm install babel-loader @babel/core @babel/runtime -D
    
    2.安装babel语法插件包
    npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
    
    3.在项目根目录下创建并配置babel.config.js文件
    module.exports={
    	presets:["@babel/preset-env"],
    	plugins:["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
    }
    
    4.配置规则:更改webpack.config.js的module中的rules数组
    {
    test:/\.js$/,
    use:"babel-loader",
    exclude:/node_modules/
    }
    

    Vue单文件组件

    vue安装Vetur插件可以使得.vue文件中的代码高亮

    配置.vue文件的加载器

    1.安装vue组件的加载器
    npm install vue-loader vue-template-compiler -D
    

    上一个命令不可以的话就试试下面这个命令

    cnpm install vue-loader vue-template-compiler -D
    
    4.配置规则:向webpack.config.js添加一些内容
    const VueLoaderPlugin = require("vue-loader/lib/plugin");
    const vuePlugin = new VueLoaderPlugin();
    module.exports ={
    plugins: [htmlPlugin, vuePlugin],
    module: {
     rules:{
     ......其他规则
     // vue文件的配置规则
                {
                    test: /\.vue$/,
                    loader: "vue-loader"
                }
     }
    }
    
    }
    

    在webpack中使用vue

    1.安装vue
    npm install vue -S
    

    上面命令报错就使用下面的命令

    cnpm install vue -S
    
    2.在index.js中导入vue
    import Vue from "vue";
    
    3.在inde.html中创建:
    <div id="app">
    
        </div>
    
    在src文件夹下创建test.vue文件,内容为
    <template>
      <!-- 这里面内容自定义 -->
      <div>hello</div>
    </template>
    <script>
    export default {};
    </script>
    <style>
    </style>
    
    4.在index.js中创建Vue实例对象,并引入test.vue
    import test from "./test.vue";
    const vm = new Vue({
        el: "#app",
        // render函数渲染单文件组件
        //h()里面test是上面import来的test
        render: (h) => h(test),
    })
    

    可能有个报错:

    DevTools failed to load SourceMap: Could not load content for webpack://package/node_modules/sockjs-client/dist/sockjs.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
    
    module.exports ={
    	plugins: [htmlPlugin, vuePlugin],
    	//加上这个配置
    	devtool: 'inline-source-map',
    }
    

    使用webpack打包发布项目

    1.配置package.json
    "scripts": {
        "dev": "webpack serve --open Chrome.exe",
        //"build": "webpack -p"		这是webpack4版本的写法
        "build": "webpack"
      },
    
    2.项目打包
    npm run build
    

    在项目打包(npm run build)之前,可以将dist目录删除,打包完成后会生成全新的dist目录

    dist文件夹下生成一个bundle.js文件和一个index.html文件,就说明打包成功

    更多相关内容
  • 1.vue中的vue-cli打包 最近在用vue写一个小项目,其中就用到了vue脚手架工具vue-cli,在测试打包后能否运行过程中遇到不少问题,而且在网上这些问题答案都不太好找,废话不多说,进入正题。 a.执行打包命令:npm run...
  • 由于vue-cli3之后不需要手动配置webpack.config.js文件,因此可以这样进行vue项目的打包 如你生成的dist文件下的index.html为空白文件,即vue.config.js中的publicpath:’/'和上图中的不一样,修改一样后即可解决此...

    由于vue-cli3之后不需要手动配置webpack.config.js文件,因此可以这样进行vue项目的打包
    在这里插入图片描述
    如你生成的dist文件下的index.html为空白文件,即vue.config.js中的publicpath:’/'和上图中的不一样,修改一样后即可解决此问题
    此外执行命令时,若package.json中无build指令,则执行npm run build:prod生成dist文件。

    展开全文
  • 使用Webpack进行项目打包,容易出现引用资源路径错误问题。总结一下一、webpack打包指令npm run build二、webpack打包后生成dist文件,将dist文件夹中的文件,放在服务器上1、如果页面空白,报错资源的引用路径不对...

    使用Webpack进行项目打包,容易出现引用资源路径错误问题。总结一下

    一、webpack打包指令

    npm run build

    二、webpack打包后生成dist文件,将dist文件夹中的文件,放在服务器上

    1、如果页面空白,报错资源的引用路径不对

    解决:找到 config > index.js

    build: {

    index: path.resolve(__dirname, '../dist/index.html'),

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'static',

    // assetsPublicPath: '/',

    // 在/前边+ .

    assetsPublicPath: './',

    }

    2、如果图片不显示

    图片路径实例:

    bd4a68d2c3137d929f1e5ef608f4776d.png

    在src > assets > img > index.jpg 放置图片

    在src > components > home > Home.vue 引用

    .home-bg

    background-image: url("../../assets/img/index.jpg")

    打包生成文件后,图片加载路径会出问题。

    解决:找到 build > utils.js

    if (options.extract) {

    return ExtractTextPlugin.extract({

    use: loaders,

    fallback: 'vue-style-loader',

    publicPath: '../../'

    // 添加publicPath: '../../'

    })

    } else {

    return ['vue-style-loader'].concat(loaders)

    }

    三、再次打包

    ----end------

    PS:引用图片路径很长,可以通过设置引用路径,来简写代码。比如:

    background-image: url("~assets/img/index.jpg")

    展开全文
  • vue项目webpack打包配置

    2022-05-03 10:19:21
    文章目录基于vue/cli3.0+脚手架搭建Vue项目(12)前言一、webpack配置1.配置vue.config.js2.配置DllPlugin提高构建和打包速度二、打包验证总结 前言 一、webpack配置 1.配置vue.config.js publicPath: './', ...

    基于vue/cli3.0+脚手架搭建Vue项目(12)



    前言


    一、webpack配置

    1.配置vue.config.js

      publicPath: './',
      outputDir: 'dist',
      assetsDir:"static",
      indexPath:'index.html',
    

    2.配置DllPlugin提高构建和打包速度

    1:项目根目录新建dll.js文件

    const path = require('path')
    const webpack = require('webpack')
    module.exports = {
      entry: {
        vendor: [ 'vue-router', 'element-ui']
      },
      output: {
        // 配置输出文件存放在本地的目录
        path: path.join(__dirname, 'dllFiles'),
        filename: '[name].js',
        library: '[name]_[hash]'
      },
      plugins: [
        new webpack.DllPlugin({
          // DllPlugin的name属性需要和libary保持一致
          name: '[name]_[hash]',
          //指定当前目录
          path: path.join(__dirname, '.', '[name]-manifest.json'),
          // context需要和webpack.config.js保持一致
          context: __dirname
        })
      ]
    }
    

    2:webpack-cli依赖的安装

    npm install webpack-cli -D
    

    3:package.json文件的scripts内添加dll运行命令行,顺便注意下面的"build": "vue-cli-service build --no-module",添加了后缀 --no-module

    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build --no-module",
        "dll": "webpack --config ./dll.js"
      },
    

    运行指令:

    npm run dll
    

    此时会在根目录生成vendor-manifest.json文件和dllFiles文件夹
    在这里插入图片描述
    4:根目录的webpack.config.js文件配置dll(tip:也可以用vue.config.js文件configureWebpack配置)

    module.exports = {
        // ...其他配置
        // 配置dll
        plugins: [
          new webpack.DllReferencePlugin({
            context: __dirname,
            // manifest就是我们第3步中打包出来的json文件
            manifest: require('./vendor-manifest.json'),
          })
        ]
      }
    

    二、打包验证

    运行指令:

    npm run build
    

    在这里插入图片描述

    打包好的文件部署在服务端后:
    在这里插入图片描述
    运行服务地址:http://47.106.123.118:8080/#/,获取登录页面账号和密码可查看之前文章:vue项目axios的封装和使用
    在这里插入图片描述


    总结

    要想把生人变成熟人,就要找到这个人的熟人。

    展开全文
  • 亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置) 执行成功如下...
  • 最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在http服务器上才可以运行, 例如 :nginx vue单页面的启动页面是...
  • 本地测试打包文件
  • VUE如何使用webpack进行项目打包

    千次阅读 2021-08-12 15:40:00
    一 安装NODEJS,NPM 二建一个目录名子随意 在目录里打开终端运行npm init -y 生成...四建立webpack.config.js 打包配制文件(这里可以通过entry.output设置打包入口入输出) module.exports={ //如果上的的时候...
  • 我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css、js以及图片等,那么打包后的文件该如何正确运行呢?  倘若直接打开html文件,会报如下错误:    那么该如何运行呢?...
  • 首先我使用vue里自带build可以直接打包 创建一个webpack.config.js在这个文件夹里加入以下代码 然后直接npm run build就可以了 constpath=require("path");//nodejs内置模块 constHtmlWebpackPlugin=require...
  • 新建Vue项目webpack打包,部署到Linux服务器Tomcat上。 2,在Linux服务器下的Tomcat的webapps下创建VueTest文件夹, 3,配置router/index.js文件,增加base: '/VueTest',VueTest就是Tomcat中webapps下文件路径 4...
  • 当项目上线后,用户不可能页通过localhost:8080访问我们的页面,只能把项目放到服务器中,才能提供给用户访问,所以vue-cli内部集成的webpack,把vue、less、js等打包成浏览器可直接执行的代码。 二、进行打包 ...
  • vue项目,访问打包后的项目,输入路径后,页面加载空白。这时会有两类问题,都是路径问题。 1.一个是css,js,ico等文件加载不到,是目录里少了dist 打开页面时一片空白 解决办法: config/index.js文件的build->...
  • 解决vue 项目使用webpack打包后,直接打开dist文件夹下的index.html页面空白的问题2020年07月11日|萬仟网IT编程 |我要评论问题描述vue项目完成后,输入npm run build命令,会生成dist文件,本地打开dist/index.html...
  • 使用的组件是【uglifyjs-webpack-plugin】。 第一步 在package.json中增加依赖。 "devDependencies": { "uglifyjs-webpack-plugin": "^1.3.0" } 增加依赖后,需要npm安装一下 cnpm install -all 第二步 在vue....
  • 日常我们开发了一个库之后,如何打包之后提供给别人使用呢?如果你不清楚,就继续看吧!!! 初始化库 mkdir library cd library npm init -y 经过以上步骤后会生成一个library文件夹,里面包含一个package.json...
  • vue项目的webpack打包优化

    千次阅读 2021-10-29 15:58:35
    我第一次从搭建项目环境,到打包准备上线测试,vue对开发者来说学习成本不高,带来了很多的便利。没有经过如何优化,直接打包出来,打开页面时就看到无尽的加载中。。。 啥???是网络不好了??? 等了半分钟...
  • vue项目webpack打包优化

    2020-05-23 16:54:38
    常用的webpack打包优化点实践。
  • 一、package.json 引入插件 copy-webpack-plugin "devDependencies": { "copy-webpack-plugin": "^11.0.0", }, 二、vue.config.js配置插件 const {defineConfig} = require('@vue/cli-service') const ...
  • Vue基础知识总结 9:vue webpack打包原理

    千次阅读 多人点赞 2021-10-02 12:32:02
    ???? Java学习路线:搬砖工逆袭Java架构师 ???? 简介:Java领域优质创作者?...、CSDN哪吒公众号作者✌ 、Java...并且不仅仅是JavaScript文件,还有CSS、图片、json文件等等,在webpack中都可以被当做模块来使用。 二、打
  • 为了解决这个问题需要配置一个清包插件,每次执行打包会自动删除dist包需要用到clean-webpack-plugin 1、安装 yarn add clean-webpack-plugin -D 2、引入 const {CleanWebpackPlugin} = require('clean-webpack-...
  • 打包项目优化: 生成打包报告 第三方库使用CDN 优化ElementUI的打包 EltUI组件按需加载 路由赖加载 去console语句 去map文件 为开发环境和生成环境设置不同打包入口(项目有main-dev.js和main-pro.js) ...
  • vue--webpack打包工具

    2022-01-22 16:39:43
    作用: 由于一些浏览器不支持es6,所以出现了一个打包工具,将前端代码统一打包成es5 打包工具 ...使用webpack打包项目 创建一个包:vue-webpack-study 创建hello.js //暴露一个方法 exports.sayHi =
  • VUE-webpack超详细教程

    千次阅读 2022-01-21 16:51:05
    webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系,而且不仅仅是JavaScript文件,CSS、图片、json文件等等在webpack中都可以被当做模块来使用 打包: 合并成一个或多个包...
  • Vue-webpack学习使用

    千次阅读 2022-04-23 12:12:08
    Vue-webpack学习使用
  • 下面就进入本文的正题了: 对本文感兴趣的,想必都有一定的开发经验了,对...基于webpack的项目啦都有一个弊端,项目体积越大,打包耗时越长。下面就把我优化项目的案例展示给你。激动么~~~ Vue项目比较大.或...
  • Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例。 必须要...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,479
精华内容 12,991
关键字:

vue使用webpack打包成dist