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    

最后的运行结果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏图像识别与深度学习

2018-06-14Ubuntu常用命令

880
来自专栏瓜大三哥

HLS Lesson9-c/c++ testbench书写

目的: l验证C函数的正确性 l提高效率 1.main()函数返回0则表明结果是正确的,如果是非0则表明结果是不正确的。 2.输入激励(stimulus) 输入...

27910
来自专栏令仔很忙

手把手教你---进程资源分配

Markdown编辑器用的还不是太熟,表格中插入图片这事还没学会,纠结着在Word中总结了下,然后截个图放在下面供大家参考:

3021
来自专栏破晓之歌

网页显示3D模型 原

中文网教程:http://www.hewebgl.com/article/articledir/1

1725
来自专栏smy

chrome浏览器Timing内各字段解析

Queueing 请求文件顺序的的排序 ? Stalled 是浏览器得到要发出这个请求的指令到请求可以发出的等待时间,一般是代理协商、以及等待可复用的TCP连接...

4355
来自专栏WindCoder

Git命令小记

[git] warning: LF will be replaced by CRLF | fatal: CRLF would be replaced by LF

781
来自专栏程序员互动联盟

【记忆卡片】linux网络命令

一、ifconfig是查看网卡的信息 ifconfig [Interface] Interface是可选项,如果不加此项,则显示系统中所有网卡的信息。如果添加此...

3385
来自专栏王磊的博客

nodejs常用组件

mssql 用途:连接SqlServer数据库 node-excel-export 用途:导出excel表格 nodegrass 用途:模拟用户进行get/po...

3346
来自专栏python读书笔记

python 数据分析基础 day7-xlrd,xlwt读写多个excel通过xlrd和xlwt读多个excel文件并写入一个新excel文件

今天总结的内容为通过xlrd和xlwt模块将读取的多个excel文件中多个工作表输出至多个excel文件中。 通过xlrd和xlwt读多个excel文件并写入一...

3718
来自专栏黑白安全

命令行下的信息搜集

[sourcecode language="plain"]C:\&amp;gt; wmic qfe get description,installedOn[/s...

937

扫码关注云+社区

领取腾讯云代金券