webpack的使用1

时间 2019-12-20

标签 webpack 使用繁體版

原文原文链接

一、安装(windows)javascript

安了npm后，npm install webpack -g，全局位置在 C:\Users\lihaihong\AppData\Roaming\npm\node_modules css

而后项目文件夹 =>html

npm init  #会自动生成一个package.json文件     //本身写package.json就npm install
npm install webpack --save-dev #将webpack增长到package.json文件中

安装开发工具java

npm install webpack-dev-server --save-dev

(spm install module-name -save 自动把模块和版本号添加到dependencies部分——产品发布依赖
spm install module-name -save-dve 自动把模块和版本号添加到devdependencies部分——开发时依赖node

)webpack

二、使用web

添加index.html,entry.jsnpm

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

document.write("看看如何让它工做！");

运行下json

添加模块了gulp

新建module1.js

module.exports = '模块1'

entry.js修改：

document.write("看看如何让它工做！");
document.write(require('./module1.js')) // 添加模块

运行下，看变化

------先运行entry.js，再执行require

三、加载器loader,处理js以外的其余文件

style.css

background:yellow;

安装对应的npm install css-loader style-loader，我一块儿安装报错，分开安装好了

entry.js加

require("!style-loader!css-loader!./style.css") // 载入 style.css

运行：webpack entry.js bundle.js => 背景变色

外部引入的样式怎么弄呢？

四、配置，可直接webpack

webpack.config.js

var webpack = require('webpack');
module.exports = {
  entry: './entry.js', //__dirname+'/x' 也能够
  output: {
    path: __dirname,  // __dirname+'/a' ----就在根目录a文件下
    filename: 'bundle.js'  //'[name]-[hash].js' ----main-63b4a6ae43aac97bb23d.js
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  }
}

注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。

可改entry.js

require('./style.css')

运行webpack，效果同前

这样就算打包了，将模块打包到指定js里

五、执行webpack => npm start

在package.json里改

scripts:{

　　"start":"webpack"

}

六、webpack本地服务器，并无实现像gulp自动刷新

配置：package.json

scripts-- "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"

webpack.config.js-----

devServer: {
    contentBase: "./",//本地服务器所加载的页面所在的目录
    //colors: true,//终端中输出结果为彩色
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  }

有colors报错，属性不对，多是版本问题吧

运行，npm run dev

http://localhost:8080/ 根目录

另选可设置 contentBase: "....."

参考文献：

http://webpackdoc.com/install.html