欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack环境下开发Vue的详细教程

程序员文章站 2022-11-20 15:47:38
webpack是前端开发必用的打包工具,在webpack下开发前端会省很多事,变得很简单. 新建项目和webpack起始简单配置 第一步,新建npm项目 mkdir we...

webpack是前端开发必用的打包工具,在webpack下开发前端会省很多事,变得很简单.

新建项目和webpack起始简单配置

第一步,新建npm项目

mkdir web-project
cd web-project
npm init -y

第二步,初始化项目:用npm 安装 vue,webpack等等

npm i webpack vue vue-loader css-loader vue-template-compiler

第三步,新建源码放置目录

mkdir src

在src下新建一个app.vue文件,写入下面的内容:

{{text}}

<script> export default { data(){ return { text: 'abc' } } } </script>#test{ color: red }

在项目根目录 web-project下,新建一个webpack的配置文件,随意起名为 webpack.config.js. 在里面写入下面的内容:

const path=require('path')

module.exports = {
    entry: path.join(__dirname,"src/index.js"),
    output: {
        filename: "bundle.js",
        path: path.join(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test:/.vue$/,
                loader: "vue-loader"
            }
        ]
    }

}

在src目录下新建一个文件index.js,并写入下面的内容:

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

const root=document.createElement('p')
document.body.appendChild(root)

new Vue({
    render:(h) => h(App)
}).$mount(root)

修改package.json

在package.json 里面找到"scripts": { "test": "echo \"Error: no test specified\" && exit 1" } 往”scriptes”添加一个脚本,修改后是这样的:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  }

第一次编译

打开终端,在项目根目录下运行

npm run build

在根目录下能看到多了一个 dist目录及其内bundle.js.

webpack配置项目加载各种静态资源及css预处理器

修改 webpack.config.js ,在module下增加几个rules,修改后是下面这样:

...
module: {
        rules: [
            {
                test:/\.vue$/,
                loader: "vue-loader"

            },
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.(gif|jpg|png|svg)$/,
                use:[
                    {
                        loader: "url-loader",
                        options: {
                            limit:1024,
                            name:'[name]-aaa.[ext]'
                        }
                    }
                ]
            }
        ]
    }
...

用 npm安装上面rules配置的loader:

npm i style-loader url-loader file-loader

现在就可以直接去在js中 import 非 js 的内容了.

js import css 和 图片

现在做一个简单的在js代码中引入 css 和 图片.

在根目录下新建 目录 assets, 在其下新建目录styles,在其下新建样式文件 test.css,内容如下:

body{
    color: red;
    background-image: url("../images/bg.jpg");
}

然后在index.js中引入 test.css:

import './assets/styles/test.css'

这样,等编译后,test.css的内容就会以js的形式出现在bundle.js中,长得就像这样:

exports.push([module.i, "body{\n    color: red;\n    background-image: url(" + escape(__webpack_require__(4)) + ");\n}", ""]);

在test.css中的背景图片,会用js以base64编码的方式,写入到bundle.js中.

现在来看看在js中引入 图片

在assets下新建目录images,并放入一张图片,这里将其随意取名为bg.jpg. 然后就可以在index.js中引入这张图片,就像下面这样:

import './assets/images/bg.jpg'

运行npm run build编译后,就能在dist目录下看到这张图片,说明编译已经通过了.

webpack 配置 css 预处理器 stylus

在webpack.config.js文件的rules下,加入新的规则块:

{
                test:/\.styl/,
                use:[
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            } 

现在完整的rules就像这样了:

...
rules: [
            {
                test:/\.vue$/,
                loader: "vue-loader"

            },
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.(gif|jpg|png|svg)$/,
                use:[
                    {
                        loader: "url-loader",
                        options: {
                            limit:1024,
                            name:'[name]-aaa.[ext]'
                        }
                    }
                ]
            },
            {
                test:/\.styl/,
                use:[
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            }
        ]
...

安装 stylus-loader:

npm i stylus-loader stylus

现在就可以用stylus来写css了.

同样的,其他的css预处理器也可以这样简单的配置,相应的loader都能在github上面找到.


webpack的loader是一层一层往上扔的,列如:

                test:/\.styl/,
                use:[
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]

这里就是 stylus-loader处理完,然后丢给css-loader,然后css-loader处理完又丢给上面的style-loader.

webpack-dev-server的配置和使用

安装一个包

npm i webpack-dev-server

在package.json 里面找到"scripts": {... ... } 往”scriptes”里添加一个脚本,修改后是这样的:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --config webpack.config.js"
  },

安装一个包npm i cross-env,这个包用于方便的设置环境变量 .

把刚刚在package.json中写的脚本命名加上环境变量,就像这样子的:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
  },

然后修改一下webpack.config.js.修改完后是这个样子:

const path=require('path')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')


const isDev = process.env.NODE_ENV === 'development'

const config = {
    target:'web',
    entry: path.join(__dirname,"src/index.js"),
    output: {
        filename: "bundle.js",
        path: path.join(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test:/\.vue$/,
                loader: "vue-loader"

            },
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.(gif|jpg|png|svg)$/,
                use:[
                    {
                        loader: "url-loader",
                        options: {
                            limit:1024,
                            name:'[name]-aaa.[ext]'
                        }
                    }
                ]
            },
            {
                test:/\.styl/,
                use:[
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            }
        ]
    },
    plugins: [
        //vue等常用到
        new webpack.DefinePlugin({
           'process.env':{
               //单引号里面是双引号;
               //在这里定义了的 isDev在代码里面可以引用
               NODE_ENV:isDev ? '"development"' : '"production"'
           }
        }),
        new HTMLPlugin()
    ]
}

if(isDev){
    //设置浏览器调试代码
    config.devtool = '#cheap-module-eval-source-map'

  //  webpack2.0 才有的devServer配置
  config.devServer = {
      port:'8000',
      host:'0.0.0.0',
      overlay:{
          //错误显示在网页上
          errors:true,
      },
      //启动完后自动打开浏览器
      open:true,
  }

}

module.exports = config

现在,运行 npm run dev ,在浏览器中输入 https://127.0.0.1:8000 已经可以看到一个简单的vue写的页面了,