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 条评论
登录 后参与评论

相关文章

来自专栏破晓之歌

centerOS部署nginx+node+pm2

说明:在centos里nginx有默认启动配置在etc/nginx/nginx.conf文件中

1573
来自专栏python学习之旅

JIRA笔记(一):安装部署JIRA

1901
来自专栏别先生

为ubuntu操作系统增加root用户

1:当安装好虚拟机,安装好Ubuntu操作系统后,登陆的时候发现除了自己的设置的用户就是外来用户,其实Ubuntu中的root帐号默认是被禁用了的,所以登陆的时...

40810
来自专栏PHP技术大全

docker 镜像与容器的导入导出操作实践

公司有一台测试服务器,网速比较慢,特别是下载一些国外站点镜像的时候,而我本机则比较快,还有梯子,所以在思考一个问题;是否能在我本地把镜像下载下来,然后复制到测试...

961
来自专栏流柯技术学院

Windows下JIRA6.3.6安装、汉化、破解

3、选择安装模式:   Express Install(use default settings):使用默认安装选项    Custom install(rec...

742
来自专栏运维小白

电脑提示没有权限在此保存文件

背景: 在更改hosts文件并保存的时候,提示没有权限在此位置保存文件 解决方法: 在开始菜单,搜索框中输入运行,找到运行框 然后在运行运行框中输入...

1949
来自专栏技术墨客

ESC服务搭建CheckList 原

注意:ESC有安全策略组,修改端口时需要在ESC的管理页面上检查相关的端口是否开放。

554
来自专栏钟绍威的专栏

实现二级域名

实现二级域名有几种方式 服务器做反向代理 服务器设置域名配置 更改服务器默认访问项目 服务器反向代理可以参考http://www.wewill.top/2016...

4556
来自专栏岑志军的专栏

gitk安装

1174
来自专栏漫漫全栈路

Ngrok编译Windows下客户端和相关配置

上一篇文章实现了Ngrok在Ubuntu服务端和Ubuntu的内网穿透代理到外网,那么基于现有的ubuntu服务端,如何让运行在win下的web服务或其他服务...

3723

扫码关注云+社区