使用webpack小实例

最新推荐文章于 2021-10-14 14:40:40 发布

ns0000

最新推荐文章于 2021-10-14 14:40:40 发布

阅读量278

点赞数

文章标签：实例

本文链接：https://blog.csdn.net/ns0000/article/details/54618513

版权

准备工作：

使用npm进行全局安装

npm install webpack -g

创建工程：

先试试手：

用js创建几个小模块，我们使用CommonJs：

cats.js

var cats = ['dave', 'henry', 'martha'];
module.exports = cats;

app.js(入口文件)

cats = require('./cats.js');
console.log(cats);

指明输出文件app.bundle.js

webpack app.js app.bundle.js

现在我们可以使用node看下我们的当前成果了：

node app.bundle.js
["dave", "henry", "martha"]

正式开始吧：

创建项目cat：

1、创建bin和src目录

mkdir bin
mkdir src

2、将源文件移动到src

move app.js src
move cats.js src

3、初始化一个npm工程

npm init

这一步会创建一个package.json文件，根据提示点就行了

4、安装webpack作为开发的依赖，会创建一个依赖目录node_modules

npm install --save-dev webpack

5、创建配置文件webpack.config.js

module.exports = {
    entry: './src/app.js',
    output: {
        path: './bin',
        filename: 'app.bundle.js'
    }
};

6、现在可以使用webpack命令进行简写了

webpack

webpack将会读取配置文件，并且创建bundle，把它保存为bin/app.bundle.js

7、运行bin/app.bundle.js

node bin/app.bundle.js
["dave", "henry", "martha"]

使用loaders

在这个例子中，我们告诉webpack通过Babel运行我们的源文件，以便我们可以使用ES2015特性

1、安装Babel和预设

npm install --save-dev babel-core
npm install --save-dev babel-preset-es2015

2、安装babel-loader

npm install --save-dev babel-loader

3、创建.babelrc文件

此文件无法直接在编辑器里创建，我们使用命令行：

echo>.babelrc

然后修改内容为：

{ "presets": [ "es2015" ] }

4、修改webpack.config.js文件，使我们的js文件都使用babel-loader处理：

module.exports = {
     entry: './src/app.js',
     output: {
         path: './bin',
         filename: 'app.bundle.js',
     },
     module: {
         loaders: [{
             test: /\.js$/,
             exclude: /node_modules/,
             loader: 'babel-loader'
         }]
     }
 }

5、安装jquery库

npm install --save jquery babel-polyfill

6、编辑app.js

import 'babel-polyfill';
 import cats from './cats';
 import $ from 'jquery';

 $('<h1>Cats</h1>').appendTo('body');
 const ul = $('<ul></ul>').appendTo('body');
 for (const cat of cats) {
     $('<li></li>').text(cat).appendTo(ul);
 }

7、webpack

 webpack

8、添加index.html，使我们的程序可以在浏览器运行

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
     </head>
     <body>
         <script src="bin/app.bundle.js" charset="utf-8"></script>
     </body>
 </html>

使用插件

修改我们的配置文件webpack.config.js

const webpack = require('webpack');

module.exports = {
    entry: './src/app.js',
    output: {
        path: './bin',
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
            output: {
                comments: false,
            },
        }),
    ]
}

ns0000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用webpack小实例

准备工作：使用npm进行全局安装 npm install webpack -g创建工程：先试试手：用js创建几个小模块，我们使用CommonJs：cats.js var cats = ['dave', 'henry', 'martha']; module.exports = cats; app.js(入口文件) cats = require('./cats.js'
复制链接

扫一扫