webpack +vue開發（1）

時間 2019-12-01

標籤 webpack vue 開發简体版

原文原文鏈接

首先安裝 node.js這是毋庸置疑的，安裝完了以後安裝webpackjavascript

npm install webpack -g

接下來建立一個本身的文件夾 webpack-learn在裏面建立一個index.html一個js文件夾css

index.html：html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<h1>webpck is nice tool</h1>
	<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

js中建立java

module-one.jsnode

console.log("module-one")

module-two.jsjquery

console.log("module-two")

entry.jswebpack

require("./module-one.js");
require("./module-two.js");

接下來運行webpack：es6

webpack js/entry.js bundle.js

前面是須要打包的文件，後面是輸出的文件，這樣就能夠看到bundle.jsweb

這個時候打開index.html就能夠看到console.log輸出的內容了，這樣操做就比較的麻煩，webpack能夠配置文件，在工程目錄下建立webpack的配置文件webpack.config.jsnpm

module.exports = {
	devtool:"sourcemap",
	entry:"./js/entry.js",
	output:{
		filename:"bundle.js",
	},
}

另外的一種配置：

// nodejs 中的path模塊
var path = require('path');
module.exports = {
    // 入口文件，path.resolve()方法，能夠結合咱們給定的兩個參數最後生成絕對路徑，最終指向的就是咱們的index.js文件
    entry: path.resolve(__dirname, '../app/index/index.js'),
    // 輸出配置
    output: {
        // 輸出路徑是 myProject/output/static
        path: path.resolve(__dirname, '../output/static'),
        publicPath: 'static/',
        filename: '[name].[hash].js',
        chunkFilename: '[id].[chunkhash].js'
    },
}

在webpack的配置文件中配置source maps，須要配置devtool，它有如下四種不一樣的配置選項，各具優缺點，描述以下：

devtool選項	配置結果
source-map	在一個單獨的文件中產生一個完整且功能徹底的文件。這個文件具備最好的source map，可是它會減慢打包文件的構建速度；
cheap-module-source-map	在一個單獨的文件中生成一個不帶列映射的map，不帶列映射提升項目構建速度，可是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試形成不便；
eval-source-map	使用eval打包源文件模塊，在同一個文件中生成乾淨的完整的source map。這個選項能夠在不影響構建速度的前提下生成完整的sourcemap，可是對打包後輸出的JS文件的執行具備性能和安全的隱患。不過在開發階段這是一個很是好的選項，可是在生產階段必定不要用這個選項；
cheap-module-eval-source-map	這是在打包文件時最快的生成source map的方法，生成的Source Map 會和打包後的JavaScript文件同行顯示，沒有列映射，和`eval-source-map`選項具備類似的缺點；

正如上表所述，上述選項由上到下打包速度愈來愈快，不過同時也具備愈來愈多的負面做用，較快的構建速度的後果就是對打包後的文件的的執行有必定影響。

在學習階段以及在小到中性的項目上，eval-source-map是一個很好的選項，不過記得只在開發階段使用它

devtool生成一個map聲明哪一個文件指向哪一個文件方便debug，刪除bundle.js文件以後直接在終端輸入webpack這個命令邊代替了以前的 webpack js/entry.js bundle.js命令，一樣會生成bundle.js，bundle.js.map,在本身的工程中引入一些庫，好比jquery

首先

npm init

這裏生成一個package.json項目安裝的庫、插件什麼的都在列表中。

安裝jquery

npm install jquery --save-dev

安裝完成後去修改一下module-one.js

var $ = require("jquery");

$("h1").html("is tomorrow");

這個時候在執行webpack命令，這個時候頁面顯示爲is tomorrow。下面使用webpack的loader。

npm install css-loader style-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015  babel-preset-stage-0 babel-runtime --save-dev

安裝完了要使用的話，還須要配置webpack.config.js

module.exports = {
    devtool:"sourcemap",
    entry:"./js/entry.js",
    output:{
        filename:"bundle.js",
    },
    module:{
        loaders:[
            {
                test:/\.css$/,
                loader:"style!css"
            },
        ]
    },
}

test使用正則匹配後綴名爲.css的文件 loader說明咱們須要使用哪一個loader處理（這裏咱們須要css和style兩個），這裏咱們去建立一個style.css文件

body{
    background: #999;
}

以後咱們去配置咱們的入口文件entry

require("./module-one.js");
require("./module-two.js");
require("../css/style.css");

執行webpack以後咱們就能夠看到咱們的body變爲了灰色，這就是咱們須要的結果。將es6使用loader處理，首先在webpack.config.js中配置，配置babel和聲明咱們的loader

module.exports = {
    devtool:"sourcemap",
    entry:"./js/entry.js",
    output:{
        filename:"bundle.js",
    },
    module:{
        loaders:[
            {
                test:/\.css$/,
                loader:"style!css"
            },
            {
                test:/\.js$/,
                loader:"babel",
                exclude:/node_modules/,
            }
        ]
    },
    babel:{
        presets:['es2015','stage-0'],
        plugins:['transform-runtime']
    }
}

exclude就是將咱們的node_modules這個目錄所有忽略掉，能夠加快的咱們速度，那麼在咱們的module-one中使用es6語法

// var $ = require("jquery");
import $ from 'jquery';

$("h1").html("is yesterday");

這樣在咱們的頁面中顯示的就是is yesterday了。

相關標籤/搜索

idea2016+vue+webpack+vue

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。