centos下使用node.js ，npm，webpack相关

最新推荐文章于 2024-05-24 14:35:22 发布

buyue__

最新推荐文章于 2024-05-24 14:35:22 发布

阅读量1.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/buyueliuying/article/details/80842346

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

nodejs官网

cd /
wget https://nodejs.org/dist/v8.11.3/node-v8.11.3-linux-x64.tar.xz
tar xvJf node-v8.11.3-linux-x64.tar.xz
cd node-v8.11.3-linux-x64/bin
ls

./node -v

现在 node 和 npm 还不能全局使用，做个软链接即可

ln -s /node-v8.11.3-linux-x64/bin/node /usr/local/bin/node
ln -s /node-v8.11.3-linux-x64/bin/npm /usr/local/bin/npm

下面我们创建一个目录来使用npm

cd /website
mkdir npmtest
cd npmtest
npm init

会显示
这里写图片描述

提示录入相关的信息，也可一路回车，最后yes，之后自动生成一个package.json文件
这里写图片描述

#本地局部安装webpack
npm install webpack --save-dev

这里写图片描述

安装成功后package.json文件会自动添加一行

"devDependencies": {
  "webpack": "^4.12.2"
}

#安装webpack-dev-server
npm install webpack-dev-server --save-dev

这里写图片描述

在npmtest目录添加文件webpack.config.js，内容如下

var config = {

};
module.exports = config;

然后在package.json的scripts里添加一个快速启动webpack-dev-server服务的脚本

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --config webpack.config.js"
  },

当执行 npm run dev 时就会执行 webpack-dev-server –open –config webpack.config.js的命令

由于我使用的是虚拟机，所以ip需要修改一下

"dev": "webpack-dev-server --host 192.168.123.229 --port 8080 --open --config webpack.config.js"

使用npm run命令前需要确保安装webpack-cli依赖包，否则会提示Cannot find module ‘webpack-cli/bin/config-yargs’这类错误

npm install webpack-cli

新建main.js空文件作为入口文件
修改webpack.config.js的内容如下

var path = require('path');
var config = {
    entry:{
        main:'./main'
    },
    output:{
        path:path.join(__dirname,'./dist'),
        publicPath:'/dist/',
        filename:'main.js'
    }
};
module.exports = config;

新增index.html文件，内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello webpack</title>
</head>
<body>
    <p id="app">hello webpack</p>
    <script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>

mkdir src

现在可以执行npm run dev

npm run dev

至此在浏览器中输入http://192.168.123.229:8080/ 即可浏览

===
在webpack里每个文件都是一个模块，像css,js,jpg等，对不同的模块，需要用不同的加载器(Loaders)来处理，现在要写css样式，需要安装style-loader和css-loader

npm install css-loader --save-dev
npm install style-loader --save-dev
#也可以这样
npm install css-loader style-loader --save-dev

安装完成后在webpack.config.js中进行Loaders的配置

var path = require('path');
var config = {
    entry:{
        main:'./main'
    },
    output:{
        path:path.join(__dirname,'./dist'),
        publicPath:'/dist/',
        filename:'main.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader',
                ]
            }
        ]
    }
};
module.exports = config;

新增style.css文件，内容为

#app{
    font-size: 24px;
    color:#343434;
}

修改main.js的内容为

import './style.css';
document.getElementById('app').innerHTML = 'hello';

重新执行npm run dev命令查看效果

如果需要用link标签引入css文件的话就需要安装extract-text-webpack-plugin插件

npm install extract-text-webpack-plugin --save-dev

这里需要注意的是webpack4.0以上使用extract-text-webpack-plugin会报错
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
处理方法
使用该方式npm install extract-text-webpack-plugin@next –save-dev 解决

新增page.css文件，内容为

*{
    margin:0;
    padding:0;
    font-size: 12px;
}

给index.html加上link标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello webpack</title>
    <link rel="stylesheet" href="/dist/page.css">
</head>
<body>
    <p id="app">hello webpack</p>
    <script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>

webpack.config.js导入插件并改写loaders的配置

var path = require('path');
//导入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
    entry:{
        main:'./main'
    },
    output:{
        path:path.join(__dirname,'./dist'),
        publicPath:'/dist/',
        filename:'main.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:ExtractTextPlugin.extract({
                    use:'css-loader',
                    fallback:'style-loader'
                })
            }
        ]
    },
    plugins:[
        //重命名提取后的css文件
        new ExtractTextPlugin("page.css")
    ]
};
module.exports = config;

重新执行npm run dev命令查看效果

每次修改文件都要重启服务，建议安装nodemon。
nodemon用来监视node.js应用程序中的任何更改并自动重启服务,非常适合用在开发环境中

#全局安装
npm install -g nodemon
#本地安装
npm install nodemon --save-dev

=====

vue相关
使用.vue文件需要安装vue-loader和vue-style-loader等加载器

npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader
npm install --save-dev babel-core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-runtime

npm install --save-dev babel-preset-env

修改webpack.config.js来支持vue文件和ES6的解析

var path = require('path');
//导入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
    entry:{
        main:'./main'
    },
    output:{
        path:path.join(__dirname,'./dist'),
        publicPath:'/dist/',
        filename:'main.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:ExtractTextPlugin.extract({
                    use:'css-loader',
                    fallback:'style-loader'
                })
            },
            {
                test:/\.vue$/,
                loader:'vue-loader',
                options:{
                    loaders:{
                        css:ExtractTextPlugin.extract({
                            use:'css-loader',
                            fallback:'vue-style-loader'
                        })
                    }
                }
            },
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude:/node_modules/
            },
            {
                test:/\.css$/,
                use:ExtractTextPlugin.extract({
                    use:'css-loader',
                    fallback:'style-loader'
                })
            }
        ]
    },
    plugins:[
        //重命名提取后的css文件
        new ExtractTextPlugin("page.css")
    ]
};
module.exports = config;

新增 .babelrc文件，内容如下

{
    "presets":["env"],
    "plugins":["transform-runtime"],
    "comments":false,
}

新增app.vue文件

<template>
    <div class="vdiv">{{name}}</div>
</template>

<script>
export default {
    data(){
        return{
            name:'vuejs'
        }
    }
}
</script>

<style>
    .vdiv{
        color:#f60;
    }
</style>

修改main.js文件

//import './style.css';
//document.getElementById('app').innerHTML = 'hello';

//导入Vue框架
import Vue from 'vue';
//导入app.vue组件
import App from './app.vue';
//创建Vue实例
new Vue({
    el:'#app',
    render:h => h(App)
})

buyue__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
centos下使用node.js ，npm，webpack相关

nodejs官网cd /wget https://nodejs.org/dist/v8.11.3/node-v8.11.3-linux-x64.tar.xztar xvJf node-v8.11.3-linux-x64.tar.xzcd node-v8.11.3-linux-x64/binls./node -v现在 node 和 npm 还不能全局使用，做个软链接即可l...
复制链接

扫一扫