首页 > Web开发 > 详细

webpack入门系列2

时间:2018-06-25 01:02:13      阅读:265      评论:0      收藏:0      [点我收藏+]

前面介绍了使用webpack做最基础的打包,接下来讲讲webpack的进阶。

1、使用 webpack 构建本地服务器:

  想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖

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

  devServer作为webpack配置选项中的一项,以下是它的一些配置选项,更多配置可以参考这里

devserver的配置选项          功能描述
contentBase

默认webpack-dev-server会为根文件夹提供本地服务器,

如果想为另外一个目录下的文件提供本地服务器,应该在这里设置其所在目录(本例设置到“public"目录)

port 设置默认监听端口,如果省略,默认为”8080“
inline 设置为true,当源文件改变时会自动刷新页面
historyApiFallback 在开发单页应用时非常有用,它依赖于HTML5 history API,如果设置为true,所有的跳转将指向index.html

 

 把这些命令加到webpack的配置文件中,现在的配置文件webpack.config.js如下所示:  

module.exports = {
    entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public", //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./public", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true //实时刷新
    }
}

  在package.json中的scripts对象中添加如下命令,用以开启本地服务器:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  }

  在终端中输入npm run server即可在本地的8080端口查看结果

  技术分享图片

2、Loaders

  接着就是大名鼎鼎的Loaders了! 

  Loaderswebpack提供的最激动人心的功能之一了。通过使用不同的loaderwebpack有能力调用外部的脚本或工具,实现对不同格式的文件的处理,比如说分析转换sasscss,或者把下一代的JS文件(ES6,ES7)转换为现代浏览器兼容的JS文件,对React的开发而言,合适的Loaders可以把React的中用到的JSX文件转换为JS文件。所以如果我们需要在应用中添加 css 文件,就需要使用到 css-loaderstyle-loader,他们做两件不同的事情,css-loader 会遍历 CSS 文件,然后找到 url() 表达式然后处理他们,style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
  接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。
cnpm install css-loader style-loader

   执行以上命令后,会在node_modules 目录安装 css-loaderstyle-loader 

  接下来在app目录下新建一个css 文件,代码如下:

body{
  background-color: green;  
}
  修改main.js文件,代码如下:
//main.js 
require("!style-loader!css-loader!./style.css");
const greeter = require(‘./Greeter.js‘);
document.querySelector("#root").appendChild(greeter());

   接下来我们使用 webpack 命令来打包:

webpack app/main.js -o public/bundle.js
或者之前配置 start 可以使用:
npm start

  注: 之前css-loader 和 style-loader 若是全局安转,在打包时可能会报错,这俩个依赖无法找到。这时可以使用以下代码解决:

npm link css-loader
npm link style-loader

  在浏览器访问,输出结果如下所示: 

技术分享图片

  require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!,当然我们可以根据模块类型(扩展名)来自动绑定需要的 loader。 将 main.js中的require("!style-loader!css-loader!./style.css") 修改为 require("./style.css") :

//main.js 
require("./style.css");
const greeter = require(‘./Greeter.js‘);
document.querySelector("#root").appendChild(greeter());

   然后执行: 

webpack app/main.js -o public/bundle.js --module-bind "css=style-loader!css-loader"

   在浏览器中访问,效果同上种。

3、配置文件

  我们可以将一些编译选项放在配置文件中(webpack.config.js),以便于统一管理: 

module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {    //新增配置文件                        
        rules: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
  devServer: {
    contentBase: "./public",  
    historyApiFallback: true,
    inline: true
  }
};

4、插件 

  插件在 webpack 的配置信息 plugins 选项中指定,用于完成一些 loader 不能完成的工。

  webpack 自带一些插件,你可以通过 cnpm 安装一些插件。

  使用内置插件需要通过以下命令来安装:

cnpm install webpack --save-dev

  比如我们可以安装内置的 BannerPlugin 插件,用于在文件头部输出一些注释信息。修改 webpack.config.js,代码如下:

var webpack = require(‘webpack‘);
module.exports = {
    entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public", //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./public", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true //实时刷新
    },
    module: { //新增配置文件
        rules: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    plugins: [ //用于输出注释信息   
        new webpack.BannerPlugin(‘注释:编译后文件!‘)
    ]
}

   然后运行吗,打开bundle.js,可以看到文件头部出现了我们指定的注释信息。

webpack入门系列2

原文:https://www.cnblogs.com/tg666/p/9222261.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!