webpack+sass+vue 入门教程（二）

最新推荐文章于 2022-02-18 13:57:42 发布

weixin_30248399

最新推荐文章于 2022-02-18 13:57:42 发布

阅读量69

点赞数

原文链接：http://www.cnblogs.com/walls/p/6258971.html

版权

六、新建webpack配置文件 webpack.config.js

文件整体框架内容如下，后续会详细说明每个配置项的配置
webpack.config.js直接放在项目demo目录下

module.exports = {
  // 配置入口
  entry: {
      
  },
  // 编译后的文件路径
  output: {
      
    path: '', // 文件路径
    filename: '' // 文件名称
  },
  module: {
    // 编译规则
    loaders: []
  },
  // 辅助的插件
  plugins:[]
}

七、新建app文件夹，存放html+css+js

1240

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>demo</title>
<link type="text/css" rel="stylesheet" href="./css/index.css" />
</head>
<body>
    <p id="demo" class="demo">hello world!</p>
    <p id="print"></p>
    
    <script type="text/javascript" src="./js/index.js"></script>
</body>
</html>

css/index.css

@charset "utf-8";

.demo{color:red;font-size:14px;}

js/index.js

var elem = document.getElementById("print");
elem.innerHTML = "wall.";

最后直接访问index.html

1240

八、将index.js内容改为webpack编译输出

新建origin文件夹，在该目录下新建origin.js文件
文件内容和index.js一致
1240
1240

接着，配置webpack.config.js

module.exports = {
  // 配置入口
  entry: {
      '/js/index':__dirname +'/origin/origin.js'
  },
  // 编译后的文件路径
  output: {
      
    path: __dirname +'/app', // 文件路径
    filename: '[name].js' // 文件名称
  },
  module: {
    // 编译规则
    loaders: []
  },
  // 辅助的插件
  plugins:[]
}

其中入口文件指定为origin.js，输出文件指定路径为app文件夹下。
[name].js == ['/js/index'].js

接着启动webpack

webpack -w

cmd控制台界面如下：
1240

直接访问本地页面，发现效果一致。再查看app/index.js文件内容，发现已经更改为编译后的代码，如下图
1240

九、安装browser-sync、browser-sync-webpack-plugin，并配置本地server

npm install --save-dev browser-sync browser-sync-webpack-plugin

安装后，package.json文件变化如下
1240

browser-sync的作用是可以监听文件修改变化，实时更新
更新webpack.config.js配置

var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
  // 配置入口
  entry: {
      '/js/index':__dirname +'/origin/origin.js'
  },
  // 编译后的文件路径
  output: {
      
    path: __dirname +'/app', // 文件路径
    filename: '[name].js' // 文件名称
  },
  module: {
    // 编译规则
    loaders: []
  },
  // 辅助的插件
  plugins:[
    new BrowserSyncPlugin({
      host:'localhost', // 实时监听，webpack -w 可以实时更新硬盘中的文件js，css
      port:8080,
      file:'',
      server:{
        baseDir:'./app' // localhost地址对应的文件目录
      }
    })
  ]
}

在cmd控制台启动webpack

webpack -w

效果如下：

1240

同时，浏览器会自动打开并访问 http://localhost:8080
1240

十、更改origin/origin.js文件，验证实时更新

修改后，页面自动刷新
1240
cmd控制台显示，重新加载了页面
1240

原文入口：http://www.jianshu.com/p/6bdabdf0c005

系列文章：
webpack+sass+vue 入门教程（一）
webpack+sass+vue 入门教程（三）

转载于:https://www.cnblogs.com/walls/p/6258971.html

weixin_30248399

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack+sass+vue 入门教程（二）

六、新建webpack配置文件 webpack.config.js文件整体框架内容如下，后续会详细说明每个配置项的配置webpack.config.js直接放在项目demo目录下module.exports = { // 配置入口 entry: { }, // 编译后的文件路径 output: { path: '', // 文件路径 ...
复制链接

扫一扫