文档章节

webpack 环境安装

zwjjap
 zwjjap
发布于 2016/11/17 15:09
字数 726
阅读 43
收藏 3

1、首先要安装 Node.js, Node.js 自带了软件包管理器 npmWebpack 需要Node.js v0.6 以上支持,建议使用最新版 Node.js

2、安装Webpack 到全局环境下 :

npm install webpack -g //(可以通过命令行 webpack -h 或webpack -v 验证)

3、将 Webpack 安装到实际项目的依赖中,这样就可以使用项目本地版本的 Webpack。

 npm install webpack --save-dev  //查看 webpack 版本信息 : npm info webpack
 //安装指定版本的 webpack: npm install webpack@1.12.x --save-dev

4、确定是否有 package.json,没有就通过 npm init 创建

5、安装Loader转换器(只需要在本地安装,不需 -g)(Webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。)

//常用的转换插件
npm install css-loader style-loader//转换CSS 
npm install postcss-loader --save-dev
npm install url-loader  //转换图片
npm install expose-loader --save-dev //暴露
npm install babel-loader babel-core 或 npm install jsx-loader  // jsx转换
npm install less less-loader --save-dev //
npm install babel-preset-es2015  //ECMAScript6语法依赖

6、配置

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
    //页面入口文件配置
    entry: {
        index : './src/js/page/index.js'
    },
    //入口文件输出配置
    output: {
        path: 'dist/js/page',
        filename: '[name].js'
    },
    module: {
        //加载器配置
        loaders: [
            //.css 文件使用 style-loader 和 css-loader 来处理
            { test: /\.css$/, loader: 'style-loader!css-loader!postcss-loader' },
            //.less 转换loader
            { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
            //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //.js 文件使用 jsx-loader 来编译处理
            { test: /\.jsx$/, loader: 'jsx-loader?harmony' },
            //图片文件使用 url-loader 来处理,小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
            //ECMAScript6语法依赖
            { test: /\.jsx?$/,
              exclude: /node_modules/, 
              loader: 'babel',
              query: {presets: ['es2015', 'react']
            }
         }
        ]
    },
    //插件项
    plugins: [commonsPlugin],
    //其它解决方案配置(webpack 有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候,允许使用动态表达式 require("./js/my.js"),但是这样过于复杂,我们可以通过这个配置项使得后面开发工作更加方便。)
    resolve: {
        //root: 'E:/github/flux-example/src', //绝对路径
        //自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        //模块别名定义,方便后续直接引用别名,无须多写长长的地址
        alias: {
            my: './js/my.js', //后续直接 var 标识符 = require('my') 即可 //标识符首字母不强要求大小写,eg:my 或 My
            api: './api.js'
        }
    }
};

⑴ plugins 是插件项,这里我们使用了一个 CommonsChunkPlugin 的插件,它用于提取多个入口文件的公共脚本部分,然后生成一个 common.js 来方便多页面之间进行复用。

⑵ entry 是页面入口文件配置,output 是对应输出项配置(即入口文件最终要生成什么名字的文件、存放到哪里)。

© 著作权归作者所有

zwjjap
粉丝 13
博文 198
码字总数 21945
作品 0
武汉
程序员
私信 提问
学习Webpack(一)之 初识webpack

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiaochunblog/article/details/85148970 学习Webpack(一)之 初识webpack webpack简介 在官网中说,webpack...

幽幽小春
2018/12/21
0
0
安装webpack和webpack打包(此文转自Henery)

Henery博客地址为:http://blog.csdn.net/henery_002 写的很详细,可以做参考 最近要做项目优化了,尤其是前端这块,许多js需要模块化管理和相应的优化 1.输入如下地址,进入node.js官网,下载...

youcongtech
2018/02/25
0
0
webpack多页面配置记录

之前也写过webpack学习记录,项目中需要一个常用的webpack多页面配置,所以才动手,本着能写一行是一行的原则,开始了配置webpack之旅。 定目录结构 首先我只需要开发环境(包含自动更新)和...

走路不看手机
2018/01/19
0
0
webpack3.X版成长之路:01(认识webpack作用)

如果您已经在前端行业中,WebPack在业界的流行程度自然必备多说,成为了前端小白升级为前端工程师的必备技能。如果你对webpack还不够熟悉,那你在前端前进的脚步会受到阻碍,但是你幸运的搜索...

bug_killer
2017/12/29
0
0
Vue2+Webpack4的那些事

大家好,本人名叫苏日俪格,现在很多的项目都使用了webpack,现在最火的也就是vue和webpack结合来完善一个项目,由于介入了一个有几年历史的产品,第一步不得不看看webpack的配置项,看看项目...

苏日俪格
2018/08/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

刚哥谈架构 (二) 我眼中的架构师

之前在公司,有小伙伴在向别人介绍我的时候,经常会有人这么说:“刚哥是我们的architcture”,如果来人是老外,心中一定是一惊,心中暗叹,“这位匪首看上去貌不惊人,难道已经做到了架构和...

naughty
29分钟前
2
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
58分钟前
82
3
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
5
0
Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部