webpack2的一些使用入門

時間 2019-12-19

標籤 webpack2 webpack 一些使用入門简体版

原文原文鏈接

首先建立一個webpack文件夾我取名叫webpackVue（爲了後續把vue集成進來）javascript

一、首先用npm初始化一下，在這個目錄下，執行npm initcss

二、npm install webpack --save-devhtml

三、安裝一些本身要用到的loader（加載css，js，scss等文件）： npm install style-loader css-loader sass-loader node-sass --save-devvue

四、安裝一些本身須要的plugin（html自動更行）：npm install html-webpack-plugin --save-devjava

五、安裝webpack-dev-server（運行在服務器上，能夠在網頁中訪問）: npm install webpack-dev-server --save-devnode

五、建立須要打包的html，css，jswebpack

index.htmlweb

<!doctype html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8" />

  </head>
  <body>
　　hello world!
    <script src="build/bundle.js"></script>    
  </body>
</html>

index.jsnpm

require('./test.scss')

test.scsssass

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　　　　

最後的運行結果以下：