Webpack 基本环境搭建
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 文件
这里的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 基本环境搭建的更多相关文章
- react+webpack+babel环境搭建
[react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...
- 最小白的webpack+react环境搭建
本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...
- React+Webpack+ES6环境搭建(自定义框架)
引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...
- vue+webpack项目环境搭建
首先安装node.js 下载地址:https://nodejs.org/en/download/ 看下是否成功安装 node -v 安装webpack,命令行npm install webpack - ...
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- vue与webpack开发环境搭建:从无到有
一个vue从无到有的搭建过程. 一.不论是webpack还是vue,最初的第一步就是安装node.js.它是基石. 从官网下载你需要的安装包:官网下载链接:http://nodejs.cn/downl ...
- 【WebGIS系列】Typescript+WebGL+Webpack开发环境搭建
目前Web实现矢量渲染的主流技术包括SVG.VML和WebGL.相对而言,VML是一种较古老的技术,虽然未成为W3C标准,但被早期的IE浏览器(IE9以下)和微软Office广泛使用,目前已经远离了浏 ...
- vue+webpack工程环境搭建
使用Vue-cli脚手架(属于vue全家桶)快速构建一个项目: [1]首先需要安装好node.js; [2]安装webpack,指令$npm install -g webpack; //如果之前有安装 ...
- 一、webpack那点事-安装、环境搭建
前言: 还记得两年前刚来公司才几个月,经理就安排我去做JS地图相关的维护和开发工作,然后就跟着一个公司老鸟(没俩月他离职了)熟悉地图相关的功能. 本人嘛,那会前端JS实际开发经验也才几个月,然后当我看 ...
随机推荐
- Linux安装Monaco字体
Linux安装字体的方式其实很简单,就是调用 fc-cache -f -v 命令,其实我们可以什么都不添加直接调用这个命令可以看到它会去/usr/share/fonts/truetype等目录以及你自 ...
- 再谈CMake与RPATH
之前写过一篇<探讨CMake中关于RPATH的使用>,只要针对的方面是在编译生成之后(不包括安装的make install)如何去除RPATH的问题.今天给大家主要介绍一下如何让CMake ...
- 10分钟 教你学会Linux/Unix下的vi文本编辑器
10分钟 教你学会Linux/Unix下的vi文本编辑器 vi编辑器是Unix/Linux系统管理员必须学会使用的编辑器.看了不少关于vi的资料,终于得到这个总结.不敢独享,和你们共享. 首先,记住v ...
- javascript权威指南学习笔记3
今天看到第四章,记录一下其中的几个点,俗话说:好记性不如烂笔头嘛. 4.9 in运算符和instanceof运算符 in运算符希望它的左操作数是一个字符串或可以转化为字符串,希望它的右操作数是一个 ...
- select 下拉菜单Option对象使用add(elements,index)方法动态添加
原生js 的add函数为下拉菜单增加选项 1.object.add(oElement [, iIndex]) index 可选参数:指定元素放置所在的索引号,整形值.如果没有指定值,将添加到集合的最后 ...
- CentOS-6.4安装配置Nginx
在安装nginx前,需要确保系统安装了g++.gcc.openssl-devel.pcre-devel和zlib-devel软件.安装必须软件: [root@admin /]#yum install ...
- 第六周O题(等边三角形个数)
O - 计数 Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Descripti ...
- Python 可变对象和不可变对象
具体可以看这里:http://thomaschen2011.iteye.com/blog/1441254 不可变对象:int,string,float,tuple 可变对象 :list,dicti ...
- DropzoneJS 可以拖拽上传的js库
介绍 可以拖拽上传的 js库 网址 http://www.dropzonejs.com/ 同类类库 1.jquery.fileupload http://blueimp.github.io/jQu ...
- Java ClassLoader基础及加载不同依赖 Jar 中的公共类(转)
http://www.iteye.com/topic/1135259 http://www.trinea.cn/android/java-loader-common-class/ http://www ...