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

目录结构

目录结构

  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 开发你的项目吧

阅读更多
版权声明:喜欢就拿去。来自:一个有梦想的咸鸭蛋 https://blog.csdn.net/EggDream/article/details/72947198
个人分类: webpack
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭