1. 第一步安装之前 先npm init 创建 package.json

　　cnpm init;

　　然后全局安装 cnpm install webpack -g 确保哪里都可以使用

　　cnpm install webpack --save-dev

　　然后在本地项目里面安装依赖

　　我们需要在项目中创建一个index.js文件，把它放到/src文件夹里。我个人习惯于把所有的静态资源（图片/字体/CSS等）存在一个文件夹里，自己写的代码存在/src文件夹内，而电脑生成的代码则会放在/build文件夹。我们并不需要手动创建/build文件夹，可以让Webpack自动完成将/src下的代码打包到/build的操作。在/src文件夹里我们可以先创建一个名为alert.js的文件。另外还需要在项目的根目录创建webpack.config.js配置文件。现在我们的项目结构大概是下面这个样子：

　　
　　

1. 在webpack.config.js里面写最基本的配置

　　module.exports = {

　　　　entry: './src', 　　　　　　　　　　//运行webpack之后会检查src下面的js文件 

　　　　output: {

　　　　　　path: 'build',

　　　　　　filename: 'bundle.js',

　　　　},

　　};

　　接下来我们在index.js里面引入 alert.js。 require('./alert.js');

　　在项目的根目录下面创建一个index.html 文件

　　

　　

<!DOCTYPE html>
　　<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　<title>Document name</title>
　　</head>
　　<body>
　　　　<h1>CSS Modules demo</h1>
　　<script src="build/bundle.js"></script> 　　　　//这里的js就是整个js入口 所有的静态资源文件都会经过webpack 配置文件进行 解析 成自己的js  
　　</body>
</html>

这里的bundle.js就是webpack打包之后会生成的文件。我们只需要在项目中运行webpack命令就可以生成它了。为了更方便一些，我们可以在package.json中写上构建的脚本：
　　"scripts": {
　　　　//如果是Windows则改为
　　　　webpack && start index.html "start": "webpack && open index.html"
　　},

　　之后在项目的命令行中输入npm start命令

3. 配置加载器（loader）

　　　加载器(Loader)是webpack的使用中非常重要的一部分。你可以把加载器看作一个小插件，在我们导入特定类型的文件时，对应的加载器就会起作用。

　　　　npm i -D babel-loader babel-core babel-preset-es2015

　　在根目录创建一个.babelrc文件，在里面设置

　　{

　　　　'presets' : '[es2015]'

　　}

　　让Babel处理所有我们自己编写的.js文件。注意配置好，不能让Babel干扰一些可能会使用的第三方库。修改webpack.config.js为如下内容：

　　

　　加载器(Loader)配置中的test值用来匹配对应的文件类型，include用来指定在哪个路径下该加载器生效。我们先来测试一下Babel是不是已经能在Webpack里正常运作了。创建一个新的文件src/robot.js，写入以下内容：

　　const  greetings = (text, person) => {

　　　　return `${text}, ${person}. I read you but I'm sorry, I'm afraid I can't do that`;

　　};

　　export default greetings;

　　我们还是要在 index.js 里面导入模块； 因为js是汇集在这里面 在webpack 打包成 bundle.js的一部分

　　import greetings from './robot.js'

　　document.write(greetings(两个参数));

4. 载入样式　

　　再安装两个加载器 我们的项目模板差不多就准备好了

　　npm install css-loader style-loader --save-dev

　  css-loader用来读取CSS文件，style-loader则负责处理并将样式加载到页面中。我们先创建src/app.css来测试一下

　  .element {

　　　　background-color: blue;

　　　　color : white;

}

　　之后通过import语句导入到src/index.js文件中

　　import styles from './app.css'.

　　

　　

5. css-modules

　　我们的代码更加清晰，我个人倾向于把CSS输出为单独的文件，而不是直接嵌入HTML里面。为了实现这个需求，我们需要安装一个叫做extract text 的 Wepack 插件。

　　将载入的所有CSS模块输出为一个独立的CSS文件。这样你的样式就不至于和JS代码混淆在一起，而是生成一个独立的CSS打包文件。假如你的样式文件体积较大的话，这种方式可以加快页面加载速度，因为样式文件可以和JS文件同时载入。

　　安装插件 npm i -D extract-text-webpack-plugin;

　　　　

　　　　最后在设置一下 webpack.config.js

　　　　　　{

　　　　　　　　test: /\.css/,

　　　　　　　　loader: ExtractTextPlugin.extract('css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),

　　　　　　}

 

Webpack 基本环境搭建的更多相关文章

  1. react+webpack+babel环境搭建

    [react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...

  2. 最小白的webpack+react环境搭建

    本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...

  3. React+Webpack+ES6环境搭建(自定义框架)

    引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...

  4. vue+webpack项目环境搭建

    首先安装node.js 下载地址:https://nodejs.org/en/download/ 看下是否成功安装 node -v 安装webpack,命令行npm install webpack - ...

  5. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  6. vue与webpack开发环境搭建：从无到有

    一个vue从无到有的搭建过程. 一.不论是webpack还是vue,最初的第一步就是安装node.js.它是基石. 从官网下载你需要的安装包:官网下载链接:http://nodejs.cn/downl ...

  7. 【WebGIS系列】Typescript+WebGL+Webpack开发环境搭建

    目前Web实现矢量渲染的主流技术包括SVG.VML和WebGL.相对而言,VML是一种较古老的技术,虽然未成为W3C标准,但被早期的IE浏览器(IE9以下)和微软Office广泛使用,目前已经远离了浏 ...

  8. vue+webpack工程环境搭建

    使用Vue-cli脚手架(属于vue全家桶)快速构建一个项目: [1]首先需要安装好node.js; [2]安装webpack,指令$npm install -g webpack; //如果之前有安装 ...

  9. 一、webpack那点事-安装、环境搭建

    前言: 还记得两年前刚来公司才几个月,经理就安排我去做JS地图相关的维护和开发工作,然后就跟着一个公司老鸟(没俩月他离职了)熟悉地图相关的功能. 本人嘛,那会前端JS实际开发经验也才几个月,然后当我看 ...

随机推荐

  1. 知识点总结之HTML篇

    1.标签语义化: ①.在不依赖样式的情况下,页面能够呈现清晰的结构. ②.如果使用者有视觉障碍,屏幕阅读器会完全根据你的标记来选择读取你的网页. ③.有利于搜索引擎依赖于标记来确定上下文和各个关键字的 ...

  2. JavaScript--垃圾回收器

    垃圾回收: 释放不再被任何变量引用的对象 垃圾回收器: 专门记录对象的引用次数,并回收不再被引用的对象的程序. 垃圾回收器和主程序并行在后台执行 垃圾回收器会为每个对象创建一个引用计数器(counte ...

  3. Java基础--说集合框架

    版权所有,转载注明出处. 1,Java中,集合是什么?为什么会出现? 根据数学的定义,集合是一个元素或多个元素的构成,即集合一个装有元素的容器. Java中已经有数组这一装有元素的容器,为什么还要新建 ...

  4. win7设置虚拟wifi

    1. cmd,使用管理员权限打开: 2. 设置:netsh wlan set hostednetwork mode=allow ssid=ABCD key=12345678 mode:是否开启虚拟wi ...

  5. javascript特殊运算符(in,instanceof,typeof,delete,void,逗号)

    in运算符                 in运算符要求其左边的运算数是一个字符串,或可以被转换为字符串,右边的运算数十一个对象或数组.如果该 运算符左边的值是右边对象的一个属性名,则返回true, ...

  6. iPhone mobile safari fixed 元素滚动慢的问题处理

    最近做一个手机阅读应用,抓取网站数据,做格式化后,适合手机浏览器以及电脑上阅读,不显示任何其他内容无关元素. Site:http://cbread.duapp.com/ 固定左侧边栏时,使用的CSS如 ...

  7. Linux下Openfire相关安装和配置

    记录下来,方便下次再用时从头查找资料 小京东ecshop中的通讯有用到openfire,Window下配置安装很简单,直接下载exe文件安装就行,而linux下要麻烦一点.安装后的配置下面会细说: 一 ...

  8. Day5 双层装饰器、字符串格式化、生成器、迭代器、递归

    双层装饰器实现用户登录和权限认证 #!/usr/bin/env python# -*- coding: utf-8 -*-# Author: WangHuafeng USER_INFO = {} de ...

  9. 禁用ios7 手势滑动返回功能

    禁用ios7 手势滑动返回功能 版权声明:本文为博主原创文章,未经博主允许不得转载. 在有的时候,我们不需要手势返回功能,那么可以在页面中添加以下代码: - (void)viewDidAppear:( ...

  10. iOS开发之WKWebView简单使用

    iOS开发之WKWebView简单使用   iOS开发之 WKWebVeiw使用 想用UIWebVeiw做的,但是突然想起来在iOS8中出了一个新的WKWebView,算是UIWebVeiw的升级版. ...