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了。