从零用webpack构建一个vue项目

最新推荐文章于 2021-07-07 14:14:47 发布

impossible1994727

最新推荐文章于 2021-07-07 14:14:47 发布

阅读量366

点赞数

分类专栏： vue 文章标签： webpak vue

本文链接：https://blog.csdn.net/impossible1994727/article/details/106949687

版权

vue 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

参考webpack官网：https://www.webpackjs.com/loaders/

demo：https://download.csdn.net/download/impossible1994727/12564299

1、需要新建的文件以及文件夹：

dist：存放打包好的文件

src：存放写好的源文件

src下新建main.js：项目启动js

index.html,webpack.config.js

2、项目初始化:npm init

根目录文件夹下自动新增一个package.json文件

确定自己项目的入口，我的项目入口为main.js。

3、安装webpack

全局安装：npm install webpack@3.6.0 -g
局部安装：npm install webpack@3.6.0 --save-dev

4、修改webpack.config.js

const path=require('path');
module.exports = {
    entry: './src/main.js',//设置项目的进入文件
    output: {
        path: path.resolve(__dirname, 'dist'),//设置项目打包到哪个文件
        filename: 'test.js',//设置项目打包之后的文件名称
    },  
}

同时在index.html引入dist的test.js文件，在main.js中console.log('a')，做测试。

上述全部完成之后运行命令webpack，然后运行index.html文件，如果输出了a，则以上全部操作视为成功。

5、添加css处理器：css-loader

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

src下新建一个css文件夹，然后新建一个css/a.css的样式文件

修改webpack.config.js文件，在module.exports中添加对样式文件的解析。

module:{
       rules:[
           {
            test: /\.css$/,
            //使用多个loader，是从右向左读
            use: ['style-loader', 'css-loader']
           }
       ]
   }

在main.js中引入css：require('./css/a.css')

上述全部完成之后运行命令webpack，然后运行index.html文件，如果a.css中的样式生效，则以上全部操作视为成功。

6、添加less处理器：less-loader

npm install --save-dev less-loader less

新建一个css/b.less的样式文件，写入

@fontsize:50px;
body{
    font-size: @fontsize;
}

在main.js中用require引入less文件：require('./css/b.less')；

在webpack.config.js的module.rules添加一下内容：

{
            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
            }]
        }

上述全部完成之后运行命令webpack，然后运行index.html文件，如果b.less中的样式生效，则以上全部操作视为成功。

如果运行webpack报错，则去package.json文件中修改less-loader的版本号为：4.1.0，运行npm install。

再运行webpack。

7、引入图片：url-loader/file-loader

npm install --save-dev file-loader
npm install --save-dev url-loader

修改webpack.config.js中module.rules：

{
                test:/\.(png|jpg|gif|jpeg)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        limit:8192,
                        name:'img/[name][hash:8].[ext]',//img:打包到dist文件中的哪个文件夹，[name]:图片本名，[hash:8]:保留8位hash，.[ext]:保留图片原本扩展名；
                    }
                }]
            }
//打包后图片所在位置：dist/img
//打包后图片名称(假设本名为close.png)：close01234567.png

在css中引入背景图片。

上述全部完成之后运行命令webpack，然后运行index.html文件，如果引入的图片文件显示了，则以上全部操作视为成功。

8、es6语法的处理：babel

用处为，将js中的es6语法转化为普通js。

npm install babel-loader@7 babel-core babel-preset-es2015 --save-dev

在webpack.config.js的module.rules添加以下内容：

 {
                test:'/\.js$/',
                exclude:/(node_modules|bower_components)/,//exclude:排除；不对其内容做转换
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['es2015']
//                        presets:['@babel/preset-env'],//或者这一个
                    }
                }
            }

可以测试在main.js中写入：const a='123';console.log(a);

上述全部完成之后运行命令webpack，然后运行index.html文件，如果main.js中写的const被转换，则以上全部操作视为成功。

9、引入vue

npm install vue --save

在main.js中引入vue：

import Vue from 'vue';
const app=new Vue({
el:'#app',
})

在index.html中写一个id=app的div标签；

上述全部完成之后运行命令webpack，然后运行index.html文件，如果没有报错，则以上全部操作视为成功。

如果打包报错信息为：you are using the runtime-only ...

则在webpack.config.js的module.exports中配置：

resolve:{
    alias:{//别名
    'vue$':'vue/dist/vue.esm.js'//当页面引用vue的时候，指向的路径为vue/dist/vue.esm.js
    }
}

10、vue组件化开发：vue-loader

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

在webpack.config.js的module.rules添加以下内容：

{
                test:/\.vue$/,
                use:['vue-loader']
            }

如果打包报错，则修改package.json中vue-loader的版本号为：13.0.0，运行npm install .

修改webpack.config.js中module.exports.resolve为：

 resolve: {
        extensions: ['.js', '.css', '.vue'],//配置此项，引用文件可以省略后缀名
        alias: {//别名
            'vue$': 'vue/dist/vue.esm.js'
        }
    },

在main.js中引入写的.vue文件。

import Vue from 'vue';
import Avue from './vue/a';//这里为引入的文件，配置了resolve的extensions，所以vue/a==vue/a.vue
new Vue({
    el:"#app",
    components:{Avue},
    template:"<Avue/>"
})

上述全部完成之后运行命令webpack，然后运行index.html文件，如果引入的vue文件显示了，则以上全部操作视为成功。

11、认识plugin:插件，对现有框架进行扩展。

添加版权的plugin:BannerPlugin（webpack自带）

修改webpack.config.js，添加plugins；

plugins:[
        new webpack.BannerPlugin('最终版权归我所有')
    ]

上述全部完成之后运行命令webpack，然后运行index.html文件，如果打包的js文件最上部有注释文字“最终版权归我所有”，则以上全部操作视为成功。

打包html的plugin

作用：自动生成index.html文件（可以指定模板），打包好的js文件自动通过script标签引入body中。

npm install html-webpack-plugin --save-dev

修改webpack.config.js的plugins 为以下内容：

 plugins:[
        new webpack.BannerPlugin('最终版权归我所有'),
        new HtmlWebpackPlugin({
            template:"index.html"//以根目录的index.html文件为模板，生成dist文件夹下面的index.html文件，并且将打包的js文件自动插入dist/index.html中
        })
    ]

若打包报错，修改package.json中html-webpack-plugin的版本号为3.2.0，运行npm install.

删除webpack.config.js中的output:plublicPath:"/dist"：已经不需要对打包后的涉及url的路径做转换了。

上述全部完成之后运行命令webpack，然后运行dist/index.html文件，如果页面展示正确，则以上全部操作视为成功。

压缩js的plugin

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

修改webpack.config.js

const uglifyJsPlugin=require('uglifyjs-webpack-plugin');
//修改module.exports下的plugins为以下内容
  plugins:[
        new webpack.BannerPlugin('最终版权归我所有'),
        new HtmlWebpackPlugin({
            template:"index.html"
        }),
        new uglifyJsPlugin()
    ]

上述全部完成之后运行命令webpack，然后查看dist下面打包的js文件，如果js是压缩状态，则以上全部操作视为成功。

12、搭建本地服务器

npm install webpack-dev-server@2.9.1 --save-dev

修改webpack.config.js文件：

devServer:{
        contentBase:'./dist',//为哪个文件提供本地服务，默认根目录
        inline:true//页面实时刷新
    }
//还有
//端口号port：默认8080
//historyApiFallback:在spa页面中，依赖HTML5的history模式

修改pageage.json文件：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",//原来运行webpack，现在运行 npm run build
    "dev":"webpack-dev-server --open"//运行npm run dev可搭建本地服务，--open意为直接打开浏览器
  },

上述全部完成之后运行命令npm run dev，若直接启动了浏览器打开该项目，则以上全部操作视为成功。

13、webpack配置的分离

npm install webpack-merge --save-dev

根目录下新建build文件夹，然后新建build/base.config.js，build/dev.config.js，build/prod.config.js

base.config.js：公用js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin =require('html-webpack-plugin');
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'test.js',
        // publicPath: 'dist/',//打包之后涉及url的路径自动转换
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                //使用多个loader，是从右向左读
                use: ['style-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:'/\.js$/',
                exclude:/(node_modules|bower_components)/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['es2015']
                    }
                }
            },{
                test:/\.vue$/,
                use:['vue-loader']
            },{
                test:/\.(png|jpg|gif|jpeg)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        limit:8192,
                        name:'img/[name][hash:8].[ext]'
                    }
                }]
            }
        ]
    },
    plugins:[
        new webpack.BannerPlugin('最终版权归我所有'),
        new HtmlWebpackPlugin({
            template:"index.html"
        }),
    ],
    resolve: {
        extensions: ['.js', '.css', '.vue'],//配置此项，引用文件可以省略后缀名
        alias: {//别名
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
}

dev.config.js：开发环境

const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');//引入base.config.js
module.exports =
    webpackMerge(baseConfig, {//合并js
        devServer: {
            contentBase: './dist',
            inline: true
        }
    })

prod.config.js：生产环境

const uglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');
module.exports = webpackMerge(baseConfig, {
    plugins: [
        new uglifyJsPlugin()
    ]
})

修改package.json中的内容如下：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },
//修改build，和dev后边的意义为，执行npm run build/dev的时候，找到对应的js

上述全部完成之后运行命令npm run dev，若直接启动了浏览器打开该项目，

然后运行命令npm run build，项目打包到dist文件夹下面，打包的js文件被压缩，运行dist/index.html，项目显示正确，则视为上述操作全部成功。

impossible1994727

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从零用webpack构建一个vue项目

1、需要新建的文件以及文件夹：空白文件夹：dist,src，index.html,webpack.config.jssrc下新建main.js2、项目初始化:npm init根目录文件夹下自动新增一个package.json文件确定自己项目的入口，我的项目入口为main.js。...
复制链接

扫一扫