webpack 搭建自动打开,刷新浏览器;

原创 2017年06月09日 00:35:31

目录结构

目录结构

  1. se6: 项目文件名;
  2. build: 打包后保存文件;
  3. src: 项目源代码;
  4. index.html: 运行时默认打开的页面(你也可以自行设置)
  5. package.json: 指定你项目中的node模块;
  6. wbpack.config.js: wbpack的配置文件

    在src文件夹下创建一个index.js文件, 这个文件就是我们的入口文件,也就是启动webpack时,webpack去访问的文件,

创建webpack.config.js文件,这个文件是运行webpack时,webpack默认运行的文件,

安装cnpm

命令
cnpm install

安装包的信息要保持到项目的package.json文件中,以便后续的其它的项目开发或者他人合作使用,package.json在项目中是必不可少的

cnpm init

webpack.config.js文件配置

const path = require('path');//node.js的 path API 路径API  
module.exports = {
    context: path.resolve(__dirname, 'src'),
    //context 基础目录,必须是绝对路径;path.resolve 解析为绝对路径 参数:————dirname 目录名,我们这里的入口文件是src/index.js,所以这里写src,path.resolve已经把目录解析为绝对路径所以不用写/src

    entry: './index.js',
    //entry:入口文件,因为我们上面已经指定了基础的目录Context(/src),所以我们这里只需要写./index.js

    output: {
        filename: 'build.js',
        //输出的文件名

        path: path.resolve(__dirname, 'build'),
        //输出的文件地址,必须是绝对路径

        publicPath: '/'     
        //该选项的值是以 runtime(运行时) 或 loader(载入时) 所创建的每个 URL 为前缀。因此,在多数情况下,此选项的值都会以/结束。例如这里的,运行后的文件地址是/build,如果你写成http://www.xx.com,运行后实际的地址是 http://www.xx.com/build  我们可以使用它解决一些图片等静态资源的路径问题,默认值是一个空字符串 ""。
    },
    module: {
    //注意这里。webpack2.5将这里的laoders替换为了rules,你可以理解为模块的规程
        rules: [
        //rules是一个数组,每一个loader都是一个对象
            {
                test: /\.js?$/,//正常匹配
                exclude: '/node_modules', // 排除,例如编译时我们并不需要编译node_modules文件下的.js文件

                use: [{loader:'babel-loader'}]
                //这是webpack2.5新的写法 
            }
        ]
    }
}

publicPath 官方文档
Module 官方文档

插件以及模块

es6的编译器:babel 官方文档
建议阅读,ES6有的语法需要安装babel的插件来使浏览器可以允许

安装命令 
npm install --save-dev babel-loader babel-core babel-preset-env webpack

webpack-dev-server
官方说明

概念:
WebPack-dev-server是一个小的Node.js 快递服务器,它使用的WebPack-DEV-中间件以服务的WebPack束。它还有一个运行时通过Sock.js连接到服务器。
服务器向客户端发送有关编译状态的信息,从而对这些事件做出反应。您可以根据需要选择不同的模式。

webpack-dev-server是一个独立的npm,如果你要使用它,就需要安装它

安装命令 
cnpm install webpack-dev-server --save-dev 

运行命令
webpack-dev-server

webpack-dev-server有两种模式支持自动刷新——iframe模式和inline模式。
在iframe模式下:页面是嵌套在一个iframe下的,在代码发生改动的时候,这个iframe会重新加载;

在inline模式下:一个小型的webpack-dev-server客户端会作为入口文件打包,这个客户端会在后端代码改变的时候刷新页面。

iframe模式无需配置;你只需要在浏览器中打开
http://localhost:8080/webpack-dev-server/index.html\

inline模式需要你在CLI 加上

--inline

在开发者服务器的两种不同模式之间切换。默认情况下,应用程序将启用内联模式。这意味着一个脚本将被插入到你的包中以保证实时重新加载,并且构建消息将出现在浏览器控制台中。

更多配置

注意
在开始前,确定你有一个 index.html 文件指向你的 bundle。假设 output.filename 是 build.js

<script src="/build.js"></script>

这里引用的不是打包后的文件地址,因为实时编译的时候,加载的是内存中的文件,这就意味着你在项目的打包路径中是无法看到打包文件。如果需要发布打包,你需要运行

webpack --config webpack.config.js 

自动打开浏览器
open-browser-webpack-plugin
官方文档

首先安装

安装命令 
cnpm install bower-webpack-plugin --save-dev

它的配置也很简单

var OpenBrowserPlugin = require('open-browser-webpack-plugin');

  plugins: [
        new OpenBrowserPlugin({ url: 'http://localhost:8080' })
    ]

最后我们方便运行webpack 使用 npm来启动webapk-dev-server
在package.json文件中
输入以下代码;他的意思是,cnpm run start 时,运行 webpack-dev-server –inline, 内联模式

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config webpack.config.js --colors",
    "start": "webpack-dev-server --inline"
  },

webpack.config.js完整配置:

const path = require('path');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
    context: path.resolve(__dirname, 'src'),
    entry: './index.js',
    output: {
        filename: 'build.js',
        path: path.resolve(__dirname, 'build'),
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: '/node_modules',
                use: [{loader:'babel-loader'}]
            }
        ]
    },
    plugins: [
        new OpenBrowserPlugin({})
    ]
}

cnpm run start 开发你的项目吧

版权声明:喜欢就拿去。来自:一个有梦想的咸鸭蛋

在 JS 中使用 fetch 更加高效地进行网络请求

原文  http://blog.parryqiu.com/2016/03/02/using_fetch_in_nodejs/ 正文~ 在前端快速发展地过程中,为了契合更好的设计模式,产生了...

(十六)ReactNative 中获取当前文件的相对路径和相对路径

在 React 中如何后获取当前文件的绝对路经和相对路径 使用RN来写iOS或者android 时,想和原声工程项目的目录 来清楚工程模块 ,在使用每个js  文件时通过require 引用当前要使用...

webpack的使用(5) ---- 热加载自动刷新

一、webpack-dev-server 一个轻量级的服务 功能:修改代码及时呈现到浏览器上。第一步:安装 npm install webpack-dev...

Mac webpack自动刷新

博主看了教程,然后在自己的MacBook Air上试用了一下,下面我将具体步骤介绍如下: 首先安装webpack: sudo npm install webpack -g npm install we...

webpack-dev-server不能自动刷新问题

使用webpack-dev-server中遇到不能浏览器无法自动刷新的问题;寻找多方答案后明白了一些;下面有一些需要注意的点:1.webpack-dev-server并不能读取你的webpack.co...

【webpack】-- 自动刷新与解析

http://www.cnblogs.com/stoneniqiu/p/6444960.html前端需要频繁的修改js和样式,且需要根据浏览器的页面效果不断的做调整;而且往往我们的开发目录和本地发布目...

【webpack】-- 自动刷新

前端需要频繁的修改js和样式,且需要根据浏览器的页面效果不断的做调整;而且往往我们的开发目录和本地发布目录不是同一个,修改之后需要发布一下;另外一点就是并不是所有的效果都可以直接双击页面就能看到,我们...

ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(下)

回顾 起因 某天,某测试说:“这个页面在 IE8 下白屏,9也白。。” 某前端开发: 吭哧吭哧。。。一上午的时间就过去了,搞定了。 第二天,某测试说:“IE 又白了。...

webpack 前端加载工具 让 浏览器端 javascript 执行 CommonJS规范

转载自:webpack 前端加载工具 让 浏览器端 javascript 执行 CommonJS规范 (注意:博主在读原文进行实践的过程中,遇到了一些小问题,这里贴出问题的解决方案: ERROR in...

ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(上)

ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(上)起因某天,某测试说:“这个页面在 IE8 下白屏,9也白。。”某前端开发: 吭哧吭哧。。。一上午的时间就...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:webpack 搭建自动打开,刷新浏览器;
举报原因:
原因补充:

(最多只允许输入30个字)