美文网首页
webpack小结

webpack小结

作者: 前端工程狮_jam | 来源:发表于2017-11-05 10:29 被阅读0次

此文主要是为了举例webpack的一些简单使用说明,它是基于nodejs环境。如果想更深入了解可以看webpack中文网站

目录

1、初始化
2、编写入口文件 entry.js
3、loader加载器
4、配置webpack.config.js文件
5、babel使用转化ES6语法
6、webpack-dev-server热加载服务
7、react配置

1、初始化

//以下命令都是在终端下执行
npm install webpack -g  //全局安装webpack环境
webpack --version   //查看是否有安装
npm init -y   //初始化项目文件夹,增加package.json文件
npm install webpack -D  //局部安装, -D等价于 --save-dev

2、编写入口文件 entry.js

//在项目根目录下分别新增index.html和entry.js
//index.html
<div id="app"></div>
<script src="bundle.js"></script>
//entry.js
let oApp = document.getElementById('app');
oApp.innerHTML = '<h3>welcome Webpack</h3>';
//终端下执行
webpack entry.js bundle.js

3、loader加载器

//webpack默认只支持javascript文件,其它文件需要用加载器(loader)
//loader类似一种转化器, 它可以把一个东西,转成另一个
//没有转化的情况下会提示 You may need an appropriate loader to handle this file type.
//例如css文件: style-loader 和 css-loader
npm install style-loader css-loader -D  //安装loader依赖包

//entry.js文件内容
let oApp = document.getElementById('app');
//注意: 在webpack中,多个loader加载用!隔开, 引入文件需要带上后缀,如果有配置resolve,可以省略后缀,例如./style
require('style-loader!css-loader!./style.css');  //webpack1.0可以省略-loader, 2.0不允许
oApp.innerHTML = '<h3>welcome Webpack</h3>';

//根目录下新增style.css文件
body{
    background:#399;
    color: #fff;
    font-size: 40px;
    text-shadow: 2px 2px 5px #000;
}

//终端下执行
webpack entry.js bundle.js

4、配置webpack.config.js文件

//根目录下新增webpack.config.js
//如果就不用webpack.config.js,自己定义名字config.js
//终端运行需要指定文件:  webpack --config config.js
//webpack.config.js
module.exports = {
    entry: './entry.js', //入口文件
    output: {
        filename: 'bundle.js' //出口
    },
    devtool: 'source-map', //直接生成source-map,作用跟webpack -d一样
    module: {
        loaders: [{
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }]
    },
    resolve: {
        //"extensions": ['', '.js', '.css', '.json', '.jsx']  //可以省略后缀名,注意这是webpack1.0
        "extensions": ['.js', '.css', '.json', '.jsx']  //注意这是webpack2.0,不允许加上'',
    }
};

//entry.js
let oApp = document.getElementById('app');
require('./style.css');
oApp.innerHTML = '<h3>welcome Webpack</h3>';

//终端下执行查看效果,这里因为配置出入口文件名,可以省略
webpack
//注意以下命令模式的区别
webpack      //开发环境下编译(打包)
webpack -p   //生产环境下编译(压缩)
webpack -w   //监听文件改动,自动编译(速度快)
webpack -d     //开启(生成)source maps(用来调试)
webpack -wpd  //同时开启多个模式

5、babel使用转化ES6语法

//安装相关依赖
npm install babel-loader babel-core babel-preset-es2015 -D
//导出模块: export default {}
//引入模块: import 名字 from 模块名

//项目根目录新增module.js
//module.js
export default {
    a: 1,
    b: 2
}

//entry.js
import modB from './module'
let oApp = document.getElementById('app');
require('./style.css');
oApp.innerHTML = '<h3>welcome Webpack</h3>' + (modB.a + modB.b);

//webpack.config.js
module.exports = {
    entry: './entry.js', //入口文件
    output: {
        filename: 'bundle.js' //出口
    },
    devtool: 'source-map', //直接生成srouce-map
    module: {
        loaders: [{
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }, {
            test: /\.js$/,
            loader: 'babel-loader',      //webpack2.0不能省略-loader
            exclude: /node_modules/, //排除那些目录
            options: {     //webpack2.0写法
                'presets': ['es2015']
            }
        }]
    }
    // babel: {    //webpack1.0写法
    //  "presets": ['es2015']
    // }
};
//配置babel预设,可以直接在webpack.config.js配置,也可以新增.babelrc文件配置
touch .babelrc   //在项目根目录新增一个.babelrc文件
//.babelrc文件内容
{
    "presets":['es2015']
}
//终端下执行webpack查看效果
webpack

6、webpack-dev-server热加载服务

//安装热加载服务依赖
npm install webpack-dev-server -g
//第一种方式开启服务,注意参数
webpack-dev-server --port 8088  端口号
webpack-dev-server --inline 改变完代码以后,自动刷新浏览器
webpack-dev-server --hot    热重载(局部更改)
//终端下执行
webpack-dev-server --inline --port 8088

//第二种方式,修改webpack.config.js配置文件
module.exports = {
    entry: './entry.js', //入口文件
    output: {
        filename: 'bundle.js' //出口
    },
    devtool: 'source-map', //直接生成srouce-map
    devServer: {
        port: 8088,
        inline: true //注意:不写hot: true,否则浏览器无法自动更新;也不要写colors:true,progress:true等,webpack2.x已不支持这些
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }, {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/ //排除那些目录
        }]
    }
};
//终端下执行
webpack-dev-server

//第三种方式,修改package.json配置文件
"scripts": {
    "dev": "webpack-dev-server --inline  --port 8088"
}
//终端下执行
npm run dev

7、react配置

//安装react预设和热加载
npm install babel-preset-react react-hot-loader -D
//安装react环境
npm install react react-dom -D
//新增list.js作为一个组件
//list.js
import React from 'react'
class List extends React.Component {
    render() {
        return <div>
            我是React-List组件
        </div>
    }
}
export {
    List as
    default
}
//.babelrc
{
    "presets":[['es2015'],['react']]
}
//webpack.config.js
module.exports = {
    entry: './entry.js', //入口文件
    output: {
        filename: 'bundle.js' //出口
    },
    devtool: 'source-map', //直接生成srouce-map
    devServer: {
        port: 8088,
        inline: true 
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }, {
            test: /\.js$/,
            loader: 'react-hot-loader!babel-loader',   //注意react-hot-loader需要用旧版本1.3.0才可以
            exclude: /node_modules/ //排除那些目录
        }]
    },
    resolve: {
        "extensions": ['.js', '.css', '.json', '.jsx'] //可以省略后缀名
    }
};

相关文章

  • webpack构建性能优化策略小结

    webpack构建性能优化策略小结

  • webpack小结

    此文主要是为了举例webpack的一些简单使用说明,它是基于nodejs环境。如果想更深入了解可以看webpack...

  • Webpack小结(webpack常用参数命令)

    --config 指定webpack配置文件路径 --mode 设置webpack打包环境分为developmen...

  • webpack学习

    Webpack小结 什么是webpack 一个打包工具,把各种各样的文件打包成一个JS文件,或者是把一些小图打包到...

  • webpack常用方法小结

    参考入门Webpackwebpack中文文档-概念webpack中文文档-详细配置webpack配置及技巧 web...

  • vue-cli 中使用 TypeScript

    学以致用,这篇文章是对在 vue-cli 中使用 TypeScript 的一次小结。 环境 npm webpack...

  • webpack几个优化方法小结

    前段时间,项目基本上做完了需要上线,我build了一下,发现打包后的有些文件后面提示big,文件很大。做完了,就要...

  • webpack 基本配置和使用

    webpack 安装 安装本地的 webpack webpack webpack-cli -D webpack可以...

  • webpack入门+react环境配置

    小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了...

  • webpack入门解析

    webpack 一. 认识webpack 1.1. webpack介绍 什么是webpack? 这个webpack...

网友评论

      本文标题:webpack小结

      本文链接:https://www.haomeiwen.com/subject/vrztpxtx.html