资讯专栏INFORMATION COLUMN

新人学习,照文档手撸webpack,bug基本修复完善(有问题请联系我,并非完全原创,不喜勿喷。。。

xiangchaobin / 429人阅读

摘要:介绍简单点来说就就是一个配置文件,所有的魔力都是在这一个文件中发生的。一安装全局安装在文件夹里面也需要安装这个是在你根目录下进行的全局安装记得加太慢,推荐用的镜像安装方法一样。二创建项目新建文件夹命令行输入命令。

介绍:
webpack简单点来说就就是一个配置文件,所有的魔力都是在这一个文件中发生的。 这个配置文件主要分为三大块

entry 入口文件 让webpack用哪个文件作为项目的入口
output 出口 让webpack把处理完成的文件放在哪里
module 模块 要用什么不同的模块来处理各种类型的文件
下面我们就一步一步来新建一个简单的项目,话不多讲,该懂的自行百度,这里只负责让你自己的webpack跑起来。

(一)安装
全局安装webpack

   npm install -g webpack

在文件夹里面也需要安装webpack

npm install webpack

这个是在你根目录下进行的全局安装记得加-g,npm 太慢,推荐用npm的镜像cnpm 安装方法一样。

(二)创建项目
新建文件夹命令行输入命令。 输入npm init后一路回车,看需要自己更改

cd study-webpack
npm init
{
  "name": "study-webpack2.0",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

此时会生成一个package.json 然后

npm install

安装基本依赖的模板

(三)建立项目基本目录结构
现在项目里面就有一个package.json, 我们多加一点东西,慢慢丰富它的内容。

/app
    index.js
    sub.js
package.json
webpack.config.js

添加了两个js文件,添加了最重要的webpack的配置文件,我们还是从非常简单的hello world开始玩起,webpack原生直接支持AMD和CommonJS两种格式

JS代码

sub.js

//我们这里使用CommonJS的风格
function generateText() {
  var element = document.createElement("h2");
  element.innerHTML = "Hello h2 world";
  return element;
}

module.exports = generateText;

index.js

var sub = require("./sub");
var app  = document.createElement("div");
app.innerHTML = "

Hello World

"; app.appendChild(sub()); document.body.appendChild(app);

代码写完了,完成一个很简单的功能,新建一个多带带的module,并且在另外一个module里面引用他,最后会在页面里面输出两个标题。

配置webpack

现在开始配置webpack,目标是把这两个js文件合并成一个文件. 我们可以自己在build文件夹里面手动建一个index.html文件夹,然后再把合并以后的js引用在里面,但是这样有些麻烦,所以我们这里安装一个plugin,可以自动快速的帮我们生成HTML。

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

在有了这个插件的前提下 开始写webpack.config.js文件

var path = require("path");
var HtmlwebpackPlugin = require("html-webpack-plugin");
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, "app");
var BUILD_PATH = path.resolve(ROOT_PATH, "build");

module.exports = {
  //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
  entry: APP_PATH,
  //输出的文件名 合并以后的js会命名为bundle.js
  output: {
    path: BUILD_PATH,
    filename: "bundle.js"
  },
  //添加我们的插件 会自动生成一个html文件
  plugins: [
    new HtmlwebpackPlugin({
      title: "Hello World app"
    })
  ]
};

然后在项目根目录运行指令,此时会生成一个build文件夹里面有bundle.js和index.html

webpack  //这个是命令行命令

配置webpack-dev-server

上面任务虽然完成了,但是我们要不断运行程序然后查看页面,所以最好新建一个开发服务器,可以serve我们pack以后的代码,并且当代码更新的时候自动刷新浏览器。

安装webpack-dev-server

npm install webpack-dev-server --save-dev

安装完毕后 在webpack.config.js中添加配置

module.exports = {
  ....
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true
  },
  ...

}
然后再package.json里面配置一下运行的命令,npm支持自定义一些命令

...
"scripts": {
  "start": "webpack-dev-server --hot --inline"
},
...

好了,万事具备了,在项目根目录下输入npm start,一堆花花绿绿的信息后server已经起来了,在浏览器里面输入http://localhost:8080 发现伟大的hello world出现了,在js里面随便修改一些输出然后保存, boom!浏览器自动刷新,新的结果出现了。

关于一些文件依赖解释:

红色框框内的东西是你运行一些文件所需要的配置,记得得在webpack.config.js里面的module下加哦,比如你需要使用sass

{
  test: /.scss$/,
  loaders: ["style-loader","css-loader","sass-loader"],
  include: APP_PATH
},


命令行得安装这些相对应的模板 npm install style-loader css-loader sass-loader --save-dev也可以分开写


提醒:要使用es6必须全局安装babel-core;使用sass也必须全局安装sass,先装ruby;

拓展

下面附上完整项目截图代码(es6):

项目目录

npm-debug.log 是调试日志文件,报错可以参考这个文件改错

index.js

import "./main.css";
import "./main.scss";

import generateText from "./sub";
import $ from "jquery";
import moment from "moment";

let app = document.createElement("div");
const myPromise = Promise.resolve(42);
myPromise.then((number) => {
  $("body").append("

look at me! now is " + number + " now is " + moment().format() + "

") }) app.innerHTML = "

Hello World!!

"; document.body.appendChild(app); app.appendChild(generateText());

sub.js

export default function() {
  var element = document.createElement("h2");
  element.innerHTML = "Hello h2 world hahaha";
  return element;
}

main.css

main.scss

variables.scss

build 文件夹下的东西会自动生成,我就不放过来了

package.json

{
  "name": "aaa",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --hot --inline"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "css-loader": "^0.26.2",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^2.28.0",
    "jquery": "^3.1.1",
    "moment": "^2.17.1",
    "node-sass": "^4.5.0",
    "sass-loader": "^6.0.2",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

webpack.config.js

var path = require("path");
var HtmlwebpackPlugin = require("html-webpack-plugin");
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, "app");
var BUILD_PATH = path.resolve(ROOT_PATH, "build");

module.exports = {
  //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
  entry: APP_PATH,
  //输出的文件名 合并以后的js会命名为bundle.js
  output: {
    path: BUILD_PATH,
    filename: "bundle.js"
  },
  //添加我们的插件 会自动生成一个html文件
  plugins: [
    new HtmlwebpackPlugin({
      title: "Hello World app"
    })
  ],
  devServer: {//webpack-dev-server的配置
    historyApiFallback: true,
    hot: true,
    inline: true
  },
  module: {
    loaders: [
      {
        test: /.css$/,
        loaders: ["style-loader","css-loader"],
        include: APP_PATH
      },
      {
        test: /.scss$/,
        loaders: ["style-loader","css-loader","sass-loader"],
        include: APP_PATH
      },
      {
        test: /.(png|jpg)$/,
        loader: ["url-loader?limit=40000"]
      },
      {
        test: /.jsx?$/,
        loader: "babel-loader",
        include: APP_PATH,
        query: {
          presets: ["es2015"]
        }
      }
    ]
  }
};

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86840.html

相关文章

  • 学不动了?可能方法不太对-Grid 网格布局

    摘要:前情提要本人是一个学渣非科班入行年了吧前端东西真的好多啊又不断更新需要不断的学学学在去年年底开始我就开始不断的寻找学习的方法如何更加高效的学习如何才能学的又快又好在这半年来不断的总结慢慢找到了一些方法和诀窍此文章不是网格布局的教学文章只前情提要   本人是一个学渣,非科班入行2年了吧,前端东西真的好多啊,又不断更新.需要不断的学学学, showImg(https://user-gold-c...

    happyfish 评论0 收藏0
  • Nodejs爬虫实战项目之链家

    摘要:很基础,不喜勿喷转载注明出处爬虫实战项目之链家效果图思路爬虫究竟是怎么实现的通过访问要爬取的网站地址,获得该页面的文档内容,找到我们需要保存的数据,进一步查看数据所在的元素节点,他们在某方面一定是有规律的,遵循规律,操作,保存数据。 说明 作为一个前端界的小学生,一直想着自己做一些项目向全栈努力。愁人的是没有后台,搜罗之后且学会了nodejs和express写成本地的接口给前端页面调用...

    noONE 评论0 收藏0
  • Nodejs爬虫实战项目之链家

    摘要:很基础,不喜勿喷转载注明出处爬虫实战项目之链家效果图思路爬虫究竟是怎么实现的通过访问要爬取的网站地址,获得该页面的文档内容,找到我们需要保存的数据,进一步查看数据所在的元素节点,他们在某方面一定是有规律的,遵循规律,操作,保存数据。 说明 作为一个前端界的小学生,一直想着自己做一些项目向全栈努力。愁人的是没有后台,搜罗之后且学会了nodejs和express写成本地的接口给前端页面调用...

    MartinDai 评论0 收藏0
  • 关于IOS测试

    摘要:由于测试环境中的数据为模拟数据,测试时必须预先考虑到正式环境中可能出现的数据类型。并在之后的测试报告中予以体现。只有在回归测试通过之后,才对产品进行提交。测试工具归纳是苹果自带的工具,肯定比较好用。 前言: 最近跟很多同行讨论过,现在也想和大家聊聊,我这里还有一些APP测试的具体指标,希望通过自己很有限的经验帮助大家。内容中部分是可以百度到,部分是我自己的一些看法,欢迎大家补充。201...

    SmallBoyO 评论0 收藏0

发表评论

0条评论

xiangchaobin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<