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　　　　

最后的运行结果以下：

1. webpack2入门
2. Webpack2入门
3. webpack2入门概念
4. webpack2 入门笔记
5. 【webpack2】-- 入门与解析
6. umi 入门和一些使用心得
7. Webpack2 那些路径
8. 一、jQuery的使用入门
9. scrapy的入门使用（一）
10. webpack2教程--从入门到放弃
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• Java Agent入门实战（三）-JVM Attach原理与使用