webpack

最新推荐文章于 2022-10-09 23:38:37 发布

xiabe

最新推荐文章于 2022-10-09 23:38:37 发布

阅读量337

点赞数 1

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/xiabenshu/article/details/90745909

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webpack

webpack简介

webpack 示例

源代码来源：how2java—webpack

简单打包

命令行方式

安装webpack，使用全局安装模式。
cnpm install -g webpack@1.13.2

cnpm install -g webpack@1.13.2

一个简单的a.js：

document.write("hello webpack");

运行打包命令：webpack a.js bundle.js

一个index.html文件：

<html>
    <head>
        <script src="bundle.js"></script>
    </head>
</html>

测试后：可以看到成功打包了。
这里直接使用打开文件的方式。

配置文件方式

webpack.config.js：

module.exports = {
  entry: './a.js',
  output: {
    filename: 'bundle.js'
  }
};

这里直接使用打开文件的方式。

配置服务器

使用 WEBPACK-DEV-SERVER

安装：
全局安装cnpm install -g webpack-dev-server@1.15.0

运行：
使用webpack-dev-server --open:
运行相应的浏览器，并打开默认的index.html页面

显示：
显示如下地址的访问：http://localhost:8080/webpack-dev-server/

端口：

module.exports = {
    entry: './a.js',
    output: {
        filename: 'bundle.js'
    },
    devServer: {
        port:8088
    }
}

热更新：

var webpack = require('webpack')
module.exports = {
    entry: './a.js',
    output: {
        filename: 'bundle.js'
    },
   plugins:[
        new webpack.HotModuleReplacementPlugin()
    ],
   devServer: {
        port:8088,
        inline:true,
        hot:true
    }
}

npm 启动方式

运行npm init -y:配置得到初始的json文件。

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "main": "a.js",
  "scripts": {
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^1.13.2"
  },
  "devDependencies": {},
  "description": ""
}

运行：npm run devnpm run dev。
dev指示脚本的内容。
使用http://localhost:8088/测试。

多个入口文件

配置一个如下的json文件：

module.exports = {
    entry: {
        bundle1: './a.js',
        bundle2: './b.js'
    },
    output: {
        filename: '[name].js'
    },
    devServer: {
        port:8088
    }
}

bundle1 对应a.js 而bundle2 对应 b.js。

兼容es6

有的时候浏览器，推出一些新的特性却没有传播。
babel 安装
一个es6写法文件 a.js

const name = 'ES6'
document.write(`hello ${name}`)

package.config.js配置：
test: /\.js$/,:表示仅仅转换js‘文件。
loader: 'babel',：使用babel loader进行 es6 转换。
query:{ presets: ['latest'] }: latest 表示用最新的语法规则进行

loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                query:{
                    presets: ['latest']
                }
            }

然后发现修改完毕的js语句应该是符合es5标准的了。

css模块引入

在webpack的概念之中，所有的文件都是模块。
通过如下命令安装css-loader和style-loader：npm install style-loader@0.13.1 css-loader@0.25.0 --save-dev

准备css文件：

body {
    background-color: blue;
}

在配置文件中增加.css的配置：

module.exports = {
    entry: './a.js',
    output: {
        filename: 'bundle.js'
    },
    devServer: {
        port:8088
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                query:{
                    presets: ['latest']
                }
            },
            {
                test:/\.css/,
                loader:'style-loader!css-loader'
            }
        ]
    }
}

修改a.js:

require("./style.css")
const name = 'ES6'
document.write(`hello ${name}`)

参考

源代码来源：how2java—webpack

xiabe

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack

webpackwebpack简介webpack 示例源代码来源：how2java—webpack简单打包命令行方式安装webpack，使用全局安装模式。cnpm install -g [email protected] install -g [email protected]一个简单的a.js：document.write("hello webpack");运行打包命令：we...
复制链接

扫一扫