從零用webpack構建一個vue項目

參考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 [email protected] -g
局部安裝：npm install [email protected] --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 [email protected] --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 [email protected] --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，項目顯示正確，則視爲上述操作全部成功。