首先创建一个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的一些使用入门的更多相关文章

  1. webpack2入门概念

    webpack是一种JavaScript应用模块化打包工具,它配置起来简单易上手,因此很多企业工程化代码都使用它来打包.在具体介绍如何使用webpack之前,先来介绍下webpack的四个核心概念. ...

  2. 【webpack2】-- 入门与解析

    每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化 安装node后,新建一个目录,比如ht ...

  3. webpack2教程--从入门到放弃

    开车之前,先介绍一些npm的命令: :D 进入D盘 mkdir webapp 创建webapp文件夹 cd webapp 进入webapp文件夹 mkdir webapp && cd ...

  4. Webpack2入门

    webpack 2 将在其文档完成之后正式发布.但这并不意味着不可以开始使用它,如果你知道怎么配置的话. 什么是 Webpack? 简单来说,Webpack 就是一个针对 JavaScript 代码的 ...

  5. webpack入门必知必会

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 这是我第一篇介绍webpack的文章,先从一个入门教程开始吧,后续会有更多相关webpack的文章推 ...

  6. webpack入门详解

    webpack入门详解(基于webpack 3.5.4  2017-8-22) webpack常用命令: webpack --display-error-details    //执行打包 webpa ...

  7. webpack快速入门——如何安装webpack及注意事项

    1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...

  8. webpack快速入门——配置文件：入口和出口，多入口、多出口配置

    1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...

  9. webpack快速入门——Json配置文件使用

    在实际工作中,我们的项目都会配置一个Json的文件或者说API文件,作为项目的配置文件. 有时候你也会从后台读取到一个json的文件,这节课就学习如何在webpack环境中使用Json. 如果你会we ...

随机推荐

  1. 112. Path Sum (Tree; DFS)

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  2. Comet OJ - Contest #2 D 枚举重心

    题面 思路: 函数f相当于是求一个点集f的直径,有一个性质是如果这个点集有多个直径一定相交于某一个点,或者一条边的中心,所以我们暴力枚举重心,计算以某个点为重心的点集对答案的贡献. 具体实现的时候,我 ...

  3. sqlserver 时间函数用法

    1.DATEADD(datepart,number,date) 现在,我们希望向 "OrderDate" 添加 2 天,这样就可以找到付款日期,我们使用如下 SELECT 语句: ...

  4. Openssl base64命令

    一.简介 对文件件进行base64的编码与解码 二.语法 openssl base64 [-in filename] [-out filename] 三.实例 1.二进制文件与base64编码互转 o ...

  5. 洛谷 P2850 [USACO06DEC]虫洞Wormholes 判负环

    虫洞(wormhole) FJ 在农场上闲逛时,发现他的农场里有很多虫洞.虫洞是一条特殊的有向路径,当 FJ 从它的一头走到另一头后,他将被传送到过去的某个时刻.FJ 的每个农场包括 N(1<= ...

  6. 关于Manifest merger failed : uses-sdk:minSdkVersion 8 cannot be smaller than version 16 declared in lib

    日志有些长,标题显示不完,截图如下: 有图可以知道,是因为在引入的libary里面的build.gradle文件里面的minSdkVersion不一致导致这个问题出现的.修改一致即可.这个问题是在co ...

  7. Android 修改 TextView 的全局默认颜色。

    如果你的应用中大多数TextView的颜色是红色, 或者其他颜色, 你是为每一个TextView都设置一次颜色, 还是有其他更好的办法, 这里教你怎么修改TextView的默认颜色. 当然我们Text ...

  8. linux 删除文件，某个文件例外

    # shopt -s extglob      (打开extglob模式) # rm -fr !(file1)

  9. HDU 1111 Secret Code (DFS)

    题目链接 题意 : 给你复数X的Xr和Xi,B的Br和Bi,让你求一个数列,使得X = a0 + a1B + a2B2 + ...+ anBn,X=Xr+i*Xi,B=Br+Bi*i : 思路 : 首 ...

  10. zrender源码分析4--初始化Painter绘图模块2

    入口2: 渲染 // zrender_demo.html zr.render(); // zrender.js /** * 渲染 * * @param {Function} callback 渲染结束 ...