webpack2的一些使用入门
首先创建一个webpack文件夹我取名叫webpackVue（为了后续把vue集成进来）
1、首先用npm初始化一下，在这个目录下，执行npm init
2、npm install webpack --save-dev
3、安装一些自己要用到的loader（加载css，js，scss等文件）： npm install style-loader css-loader sass-loader node-sass --save-dev
4、安装一些自己需要的plugin（html自动更行）：npm install html-webpack-plugin --save-dev
5、安装webpack-dev-server（运行在服务器上，可以在网页中访问）: npm install webpack-dev-server --save-dev
5、创建需要打包的html，css，js
index.html
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" /> </head>
<body>
hello world!
<script src="build/bundle.js"></script>
</body>
</html>
index.js
require('./test.scss')
test.scss
body {
color: red;
}
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const path = require('path');
module.exports = {
entry: "./index.js", // 入口文件
// 输出文件 build下的bundle.js
output: {
path: path.resolve(__dirname, 'build'),
filename: "bundle.js"
},
// 使用loader模块
module: {
loaders: [
{test: /\.css$/, loader: "style-loader!css-loader"}
],
loaders: [
{test: /\.scss$/, loader: "style-loader!css-loader!sass-loader"}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
})
],
};
然后使用npm run build命令进行打包
不要使用webpack命令，webpack没有全局安装，npm run build 会到node-modules里面去找webpack，在webpack根目录下执行webpack命令。
如果要使用webpack命令，要在webpack安装根目录下执行，或者全局安装后，指定node-path，不推荐全局安装webpack
最后的运行结果如下：
webpack2的一些使用入门的更多相关文章
- webpack2入门概念
webpack是一种JavaScript应用模块化打包工具,它配置起来简单易上手,因此很多企业工程化代码都使用它来打包.在具体介绍如何使用webpack之前,先来介绍下webpack的四个核心概念. ...
- 【webpack2】-- 入门与解析
每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化 安装node后,新建一个目录,比如ht ...
- webpack2教程--从入门到放弃
开车之前,先介绍一些npm的命令: :D 进入D盘 mkdir webapp 创建webapp文件夹 cd webapp 进入webapp文件夹 mkdir webapp && cd ...
- Webpack2入门
webpack 2 将在其文档完成之后正式发布.但这并不意味着不可以开始使用它,如果你知道怎么配置的话. 什么是 Webpack? 简单来说,Webpack 就是一个针对 JavaScript 代码的 ...
- webpack入门必知必会
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 这是我第一篇介绍webpack的文章,先从一个入门教程开始吧,后续会有更多相关webpack的文章推 ...
- webpack入门详解
webpack入门详解(基于webpack 3.5.4 2017-8-22) webpack常用命令: webpack --display-error-details //执行打包 webpa ...
- webpack快速入门——如何安装webpack及注意事项
1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...
- webpack快速入门——配置文件：入口和出口，多入口、多出口配置
1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...
- webpack快速入门——Json配置文件使用
在实际工作中,我们的项目都会配置一个Json的文件或者说API文件,作为项目的配置文件. 有时候你也会从后台读取到一个json的文件,这节课就学习如何在webpack环境中使用Json. 如果你会we ...
随机推荐
- spring4-2-bean配置-6-使用外部属性文件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAk0AAAFGCAIAAAD4tzxRAAAgAElEQVR4nO2d27HsOm+tOxWn4CeXAm ...
- appium desktop v1.2.7在android7.0上运行报错“Error: Error executing adbExec”
1.参考下面链接,https://stackoverflow.com/questions/42283921/unable-to-run-appium-tests-on-android-7-0:得知需要 ...
- linux下两台服务器文件实时同步方案实现-乾颐堂
假设有如下需求: 假设两个服务器: 192.168.0.1 源服务器 有目录 /opt/test/ 192.168.0.2 目标服务器 有目录 /opt/bak/test/ 实现的目的就是保持这两 ...
- 10个最新手机美食APP界面设计欣赏
移动软件时代,简单下载美食app,动动手指,滑动几下手机屏幕,即可足不出户,搜索,预定和购买各路美食.然而,对于作为手机app UI 界面设计师的你来说,最大的问题并不在于如何使用这些美食软件来方便生 ...
- Nlog- Application Logging in C#
当你在谷歌搜索 Application Loggin in C#,排在最前面的是这个 .NET Logging Tools and Libraries ,点击进去你会发现里面收录了不错的日记工具及文 ...
- ubuntu 16.04快速建lvm
1.准备2块虚拟硬盘 在执行下面之前先安装:lvm和mkfs.xfs apt install lvm2 -y apt install xfsprogs dd if=/dev/zero of=ceph- ...
- 在word上写博客直接发到CSDN
目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...
- 在iOS中使用百度地图
就如同在百度地图的文档中所说的一样,这么来.但是,有一个小疏忽. 到添加完所需要的framework之后,一定要记得把你的(Class-Prefix)AppDelegate的后缀改成mm. 估计百度的 ...
- Digital image processing(数字图像处理)
In computer science, digital image processing is the use of computer algorithms to perform image pro ...
- 所有中心对称五字母域名生成，扫了一下，com的基本上都被注册了。。。
public static void main(String[] args) { String[] letter = new String[]{"i","m", ...